Dieser Artikel beschreibt die hoch anpassungsfähige Lösung von Iframe im Cross-Browser, was sehr praktisch ist. Teilen Sie es für Ihre Referenz. Die spezifischen Methoden sind wie folgt:
Diese Methode verwendet JQuery, daher muss JQuery in die SRC -Seite des Iframe eingeführt werden.
Die übergeordnete Seite ist relativ einfach und enthält hauptsächlich den folgenden Code:
<iframe id = "if1" scrolling = "no" src = "2.html"> </iframe>
Der Code auf der SRC -Seite von Iframe lautet wie folgt:
<script type = "text/javaScript"> Funktion resizeContent () {$ (window.parent.document) .find ("#if1"). Höhe ($ ("#content"). Height ());} Funktion show400 () {if ($ ("#test400"). $ ("#Test400"). CSS ("Display", ""); resizecontent (); } else {$ ("#Test400"). CSS ("Anzeige", "keine"); resizecontent (); }} $ (Dokument) .Ready (function () {resizeContent ();}) </script> <div id = "Left111"> <div onclick = "test400 ()"> </div> <div> <a href = "productList.html"> hyperlink </a> </div> <a <a> <a href="ProductCategory.html">Hyperlink</a></div> <div><a href="ProductCategory.html">Hyperlink</a></div> <div><a href="ProductCategory.html">Hyperlink</a></div> <div id="test400" style = "display: keine; Höhe: 400px;"> </div> <div> <a href = "ordners.html"> hyperlink </a> </div> <div> <a href = "keywords.html"> hyperlink </a> </div> <a hreef = " href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </a> </div> <div> <a href = "#"> Hyperlink </a> </div> <div> <a href = "#"> Hyperlink </a> </div> <a <a <a <a href href = "#"> hyperlink </a> </div> <br/> </div>Anmerkungen:
Innen
$ (window.parent.document) .find ("#if1"). Höhe ($ ("#content"). height ());Dieser Satz war ursprünglich:
$ (window.parent.document) .find ("#if1"). Höhe ($ (Dokument) .Height ());Die adaptive Höhe kann erreicht werden, aber die Skalierungsanpassung kann nicht erreicht werden. Da die Höhe des Dokuments die höchste Höhe ist, die angezeigt wurde, schrumpft der IFrame, wenn Sie hier erweitert werden, nicht die höchste Höhe, die angezeigt wurde .
Hier müssen wir also einen übergeordneten Schichtbehälter verwenden, dh den neuesten Code. Dies ermöglicht Anpassungsfähigkeit.
Ich glaube, dass die Beschreibung in diesem Artikel einen gewissen Referenzwert für die JQuery -Programmierung aller hat.