この記事では、非常に実用的なクロスブラウザーでのIFRAMEの高度に適応可能なソリューションについて説明します。参照のためにそれを共有してください。特定の方法は次のとおりです。
この方法ではjQueryを使用するため、jQueryをiframeのSRCページに導入する必要があります。
親ページは比較的単純で、主に次のコードが含まれています。
<iframe id = "if1"スクロール= "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")。 $( "#test400")。css( "display"、 ""); ResizeContent(); } else {$( "#test400")。css( "display"、 "none"); ResizeContent(); }} $(document).ready(function(){resizeContent();})</scrip> <div id = "left111"> <div onclick = "test400()"> </div> <div> <a href = "productlist.html"> hyperlink </a> </div> <> <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:none; height:400px;"> </div> <div> <a href = "orders.html"> hyperlink </a> </div> <a href = "keywords.html"> hyperlink </a> </div> <div> <a href = "#hyperlink </a </</ href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </a> </div> <div> <a href = "#"> hyperlink </a> </div> <> <> <a href = "#"> hyperlink </a> </div> <br/> </div>注:
内部
$(window.parent.document).find( "#if1")。height($( "#content")。height());
この文は元々:
$(window.parent.document).find( "#if1")。height($(document).height());
適応高さを達成できますが、スケーリングの適応を達成することはできません。ドキュメントの高さは表示されている最高の高さであるため、クリックしてここで展開すると、IFRAMEは収縮せず、表示されている最高の高さのみを表示します。
したがって、ここでは、親層のコンテナ、つまり最新のコードを使用する必要があります。これにより、適応性が可能になります。
この記事の説明には、全員のjQueryプログラミングの特定の参照値があると思います。