Taille adaptative iframe

Le domaine a.html appartient à la page principale A: www.taobao.com

Le domaine b auquel appartient la page iframeda b.html: www.alimama.com, en supposant l'adresse: http://www.alimama.com/b.html

La page sous le nom de domaine A A.HTML est intégrée dans la page B.HTML sous le nom de domaine B B via un iframe. Étant donné que la largeur et la hauteur de B.HTML sont imprévisibles et changent, la taille adaptative de l'IFRAME en A.HTML est requise.

Le problème de l'accès à iframe croisé de JS, car pour contrôler la hauteur et la largeur de l'Iframe en A.HTML, vous devez d'abord lire la taille de B.HTML. A et B n'appartiennent pas au même domaine. Pour des raisons de sécurité, le navigateur restreint l'accès croisé à JS et ne peut pas lire la hauteur et la largeur de B.HTML.

La page proxy proxy C.HTML appartient au même domaine A et A.Html. C.HTML est une page proxy intermédiaire fournie sous le domaine a. Supposons que l'adresse de C.HTML est: www.taobao.com/c.html, qui est responsable de la lecture des valeurs de largeur et de hauteur dans l'emplacement.hash, puis de définir la largeur et la hauteur de l'Iframe en A.HTML sous le même domaine qu'elle.

Code a.html

Tout d'abord, B.HTML a été introduit via iframe en A.Html

<iframe id = b_iframe height = 0 ′ width = 0 ′ src = http: //www.alimama.com/b.html frameborder = no border = 0px marginwidth = 0 ′ marginheight = 0 ′ scrolling = no alltetransparency = oui> </ iframe>

B.HTML Code

<script type = text / javascript>

var b_width = math.max (document.DocumentElement.ClientWidth, document.body.clientwidth);

var b_height = math.max (document.documentElement.clientHeight, document.body.clientHeight);

var c_iframe = document.getElementById (c_iframe);

c_iframe.src = c_iframe.src + # + b_width + | + b_height; //http://www.taobao.com/c.html#width|height

}

</cript>

<! - JS lit la largeur et la hauteur de B.HTML et définit la largeur et la hauteur de la lecture sur la page du proxy moyen de C.HTML dans le même domaine, et définit la largeur et la hauteur de la lecture au hachage du SRC de C.Html->

<iframe id = c_iframe height = 0 ′ width = 0 ′ src = http: //www.taobao.com/c.html style = affiche: aucun> </ iframe>

Code C.HTML

<script type = text / javascript>

var b_iframe = parent.parent.document.getElementById (b_iframe);

var hash_url = window.location.hash;

var hash_width = hash_url.split (#) [1] .split (|) [0] + px;

var hash_height = hash_url.split (#) [1] .split (|) [1] + px;

b_iframe.style.width = hash_width;

b_iframe.style.height = hash_height;

</cript>

L'IFRAME en A.HTML peut s'adapter à la largeur et à la hauteur de B.Html.

D'autres problèmes de fonctionnement inter-domaines similaires à JS peuvent également être résolus selon cette idée