Iframe-Implementierung der browserübergreifenden adaptiven Höhenlösung_jquery

In diesem Artikel wird die browserübergreifende adaptive Höhenlösung für Iframe anhand von Beispielen beschrieben, die von großem praktischem Wert sind. Teilen Sie es als Referenz mit allen. Die spezifische Methode ist wie folgt:

Diese Methode verwendet jQuery, daher muss jQuery in die src-Seite des Iframes 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 des Iframe lautet wie folgt:

<script type="text/javascript">
function resizeContent()
{
    $(window.parent.document).find("#if1").height($("#content").height());
}

function show400()
{
    if($("#test400").css("display") == "none")
    {
       $("#test400").css("display","");
       resizeContent();
    }
    else
    {
       $("#test400").css("display","none");
       resizeContent();
    }
}
$(document).ready(function(){
    resizeContent();
})
</script>
<div id="left111">
 <div class="mnav" onclick="test400()"></div>
 <div class="mnav"><a href="ProductList.html">超级链接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超级链接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超级链接</a></div>
 <div id="test400" style="display:none;height:400px;"></div>
 <div class="mnav"><a href="Orders.html">超级链接</a></div>
 <div class="mnav Mcurrent"><a href="Keywords.html">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <br />
</div>

Hinweis:

Hier

$(window.parent.document).find("#if1").height($("#content").height()); 

Dieser Satz lautete ursprünglich:

$(window.parent.document).find("#if1").height($(document).height());

Eine adaptive Höhe kann erreicht werden, eine Skalierungsanpassung kann jedoch nicht erreicht werden. Da es sich bei der Höhe des Dokuments um die höchste Höhe handelt, in der der angezeigte Inhalt jemals angezeigt wurde, wird der Iframe nicht verkleinert, wenn Sie hier zum Erweitern klicken und nur die höchste Höhe aller Zeiten anzeigen .

Hier wird also ein übergeordneter Container verwendet, bei dem es sich um den neuesten Code handelt. Auf diese Weise kann eine Selbstanpassung erreicht werden.

Ich glaube, dass das, was in diesem Artikel beschrieben wird, einen gewissen Referenzwert für die jQuery-Programmierung aller hat.