クロスブラウザー適応型高さ solution_jquery の iframe 実装

この記事では、Iframe のクロスブラウザーに適応する高さのソリューションを例の形式で説明します。これは非常に実用的です。皆さんの参考に共有してください。具体的な方法は以下の通りです。

このメソッドは jQuery を使用するため、iframe の src ページに jQuery を導入する必要があります。

親ページは比較的単純で、主に次のコードが含まれています:

<iframe id="if1" scrolling="no" src="2.html"></iframe>

iframe の src ページのコードは次のとおりです:

<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>

注:

こちら

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

この文の元々の読み方は次のとおりです:

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

高さの適応は達成できますが、スケーリングの適応は達成できません。 ドキュメントの高さは、表示されているコンテンツがこれまでに表示された中で最も高い高さであるため、ここをクリックして拡大すると、iframe は縮小せず、これまでで最も高い高さのみが表示されます 。

ここでは親コンテナが使用されており、これが最新のコードです。このようにして、自己適応を達成することができます。

この記事で説明されている内容は、皆さんの jQuery プログラミングにとって一定の参考になると思います。