この記事では、非常に実用的なクロスブラウザーでの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プログラミングの特定の参照値があると思います。