ホームページ  >  記事  >  ウェブフロントエンド  >  クロスブラウザー適応型高さ solution_jquery の iframe 実装

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

WBOY
WBOYオリジナル
2016-05-16 16:38:041203ブラウズ

この記事では、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 プログラミングにとって一定の参考になると思います。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。