Googleから簡単に見つかる多くの例を使用して、（PHPを使用して動的に生成される）コンテンツに合わせてiframeのサイズを変更するコードを記述しました。それはうまくいきますが、多くの検索にもかかわらず、私はできないという問題で解決策を見つけることができます。インテリア要素の高さが正しくないことを報告するiFrame
メインHTML
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src=(JQuery URL)></script>
<script src=(External JS file URL, code detailed below)></script>
</head>
<body>
<div id="container">
<iframe id="iframe" src=(url of source file) onload="resize()"></iframe>
</div>
</body>
</html>
iFrameのソースHTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="innerFrameDivs">
<?php (dynamically generated content) ?>
</div>
<div class="innerFrameDivs">
<?php (dynamically generated content) ?>
</div>
</body>
</html>
Javascriptを
function resize()
{
var iframe = document.getElementById("iframe");
var contentHeight = iframe.contentDocument.body.scrollHeight;
$('#iframe').css('height',contentHeight);
}
CSS
#iframe {
display:block;
border:none;
height:auto;
}
これで、iframeは内容に合わせてサイズが変更されますが、コンテンツの下に空き領域が残る点が異なります。
これは、iframeによって報告されるscrollHeightが実際にコンテンツの高さよりも大きいため、要素の高さを内側のものよりも大きく設定すると、底に空のスペース。
さらに調査したところ、iframeは要素の実際の個々の高さが実際よりも大きいと報告しています。
$('#iframe').contents().find('.innerFrameDivs').each(function(){
var height = $(this).css('height');
alert(height);
});
$(document).find('.innerFrameDivs').each(function(){
var height = $(this).css('height');
alert(height);
});
と要素にもかかわらず、同じCSSで、異なる高さが報告されました。たとえばiframeソースのトップページの高さは241、下部のdivの高さは901で、iframeソースページはブラウザタブでネイティブに開いたときにトップdivの高さが207、bottom divの高さが785と報告された
したがって、iframeは何らかの理由で内部要素の高さを膨らませ、そのスクロール高さを膨張させています。理由はわかりません。私はscrollHeightのパーセンテージ、たとえば90％をiframeの高さとして使用することを考えましたが、内側のdivの内容が動的に生成されるため、劇的に高さが変化するため、うまく動作しません。
iframeのCSSに 'display：block'と 'height：auto'を入れました。なぜなら、これらのルールがこの問題に対処するのに役立つかもしれないが、何もしなかったということです。
この問題はすべてのブラウザで発生しますが、ChromeとSafariではFirefoxよりも劇的です（Webkitは一般的にMozillaよりも高さが高いため）。
これを引き起こす原因や修正方法は誰にも分かりますか？
複数の瞬間の高さを測定し、結果を比較すると役立ちます。あなたは、 'setTimeout'の中で' window.load'のコードを実行してより正確な結果を得ることができます。これにより、 'window.load'にバインドされたすべてのものが実行された後にコードが実行され、正確な高さを得る可能性が大幅に高まります。私はあなたが2つのドキュメントを取り扱っており、それぞれに独自の 'window.load'イベントがあることを知っていると思います。 Aframeでは、iframeの 'load'が最初に起動します（メイン文書は、他のものの中でそれ自身を起動するのを待っているためです）。 –
提案を歓迎しますが、これを試しても何も変わりません。私はそれを理解しました - 水平スクロールバーの高さが追加されました。 – namkcuR