Cet article décrit la solution hautement adaptable d'Iframe dans le cross-browser, ce qui est très pratique. Partagez-le pour votre référence. Les méthodes spécifiques sont les suivantes:
Cette méthode utilise jQuery, donc jQuery doit être introduit dans la page SRC de l'Iframe.
La page parent est relativement simple, y compris principalement le code suivant:
<iframe id = "if1" scrolling = "no" src = "2.html"> </ iframe>
Le code dans la page SRC d'Iframe est le suivant:
<script type = "text / javascript"> function resizEcontent () {$ (window.parent.document) .find ("# if1"). hauteur ($ ("# contenu"). hauteur ());} fonction show400 () {if ($ ("# test400"). css ("affiche") == "non") { $ ("# test400"). CSS ("affichage", ""); resizecontent (); } else {$ ("# test400"). css ("affiche", "aucun"); resizecontent (); }} $ (document) .ready (function () {resizEcontent ();}) </cript> <div id = "Left111"> <div onclick = "test400 ()"> </v> <v> <a href = "productList.html"> hyperlien </a> </v> <v> <a href = "productcategory.html"> hyperlink </a> </div> <div> <a href = "productcategory.html"> hyperlien </a> </v> <v> <a href = "productcategory.html"> hyperlink </a> </v> <div id = "test400" Style = "Affichage: Aucun; hauteur: 400px;"> </div> <div> <a href = "orders.html"> hyperlink </a> </div> <v> <a href = "Keywords.html"> hyperlink </a> </v> <v> <a href = "#"> hyperlink </a> href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </a> </div> <v> <a href = "#"> hyperlink </a> </div> <av> <a href = "#"> hyperlien </a> </div> <br /> </div>Notes:
À l'intérieur
$ (window.parent.Document) .find ("# if1"). hauteur ($ ("# contenu"). Hight ());Cette phrase était à l'origine:
$ (window.parent.document) .find ("# if1"). hauteur ($ (document) .Height ());La hauteur adaptative peut être obtenue, mais l'adaptation à l'échelle ne peut pas être obtenue. Étant donné que la hauteur du document est la hauteur la plus élevée qui a été affichée, si vous cliquez pour vous développer ici, l'IFRAME ne rétrécira pas, mais affichera seulement la hauteur la plus élevée qui a été affichée .
Nous devons donc ici utiliser un conteneur de couche parent, c'est-à-dire le dernier code. Cela permet l'adaptabilité.
Je crois que la description de cet article a une certaine valeur de référence pour la programmation jQuery de chacun.