iframeのheightをjqueryで調整する
iframeで取り込まれるフレームのコンテンツの高さなどがjavascriptで動的に更新される場合、その完了したタイミングを親側で検知するのは難しい。
そのため、取り込まれるフレーム側で親のiframeの属性を変更する必要がある。
<html> <body> <iframe src="iframe1.html" id="if1" width="100%" ></iframe> <iframe src="iframe2.html" id="if2" width="100%" ></iframe> <iframe src="iframe3.html" id="if3" width="100%" ></iframe> </body> </html>
iframe1.html:
<html> <head> <style> body{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } </style> <script src="jquery-1.2.6.js"></script> <script> $(document).ready(function(){ var height = $("h1").height(); $("#if1", top.document).height(height); }); </script> </head> <body> <h1>child frame #1</h1> </body> </html>
iframe2.html:
<html> <head> <style> body{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } </style> <script src="jquery-1.2.6.js"></script> <script> $(document).ready(function(){ var height = $("h2").height(); $("#if2", top.document).height(height); }); </script> </head> <body> <h2>child frame #2</h2> </body> </html>
iframe3.html:
<html> <head> <style> body{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } </style> <script src="jquery-1.2.6.js"></script> <script> $(document).ready(function(){ var height = $("h3").height(); $("#if3", top.document).height(height); }); </script> </head> <body> <h3>child frame #3</h3> </body> </html>
