Main.phpのiframe内にロードしているhelp.phpというヘルプページがあります。iframeにロードした後、このページの高さを取得するにはどうすればよいですか。
Iframeの高さを100%または自動にスタイル設定できないため、これを求めています。だから、javascriptを使用する必要があると思います。jQueryを使用しています
CSS:
body {
margin: 0;
padding: 0;
}
.container {
width: 900px;
height: 100%;
margin: 0 auto;
background: silver;
}
.help-div {
display: none;
width: 850px;
height: 100%;
position: absolute;
top: 100px;
background: orange;
}
#help-frame {
width: 100%;
height: auto;
margin:0;
padding:0;
}
JS:
$(document).ready(function () {
$("a.open-help").click(function () {
$(".help-div").show();
return false;
})
})
HTML:
<div class='container'>
<!-- -->
<div class='help-div'>
<p>This is a div with an iframe loading the help page</p>
<iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
</div> <a class="open-help" href="#">open Help in iFrame</a>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
oK、ようやく良い解決策が見つかりました。
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});
一部のブラウザ(古いSafariおよびOpera)は、CSSがレンダリングされる前にonloadが完了したと報告するため、マイクロタイムアウトを設定し、iframeのsrcを空白にして再割り当てする必要があります。
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}
それほど複雑ではない答えは、.contents()
を使用してiframeに到達することです。興味深いことに、身体のパディングのために、元の回答のコードを使用して得られる値とは異なる値を返します。
$('iframe').contents().height() + 'is the height'
これがクロスドメイン通信のために私がそれをやった方法なので、多分不必要に複雑になるのではないかと心配しています。まず、jQueryをiFrameのドキュメント内に配置します。これはより多くのメモリを消費しますが、スクリプトを一度ロードするだけでよいので、ロード時間を増やすべきではありません。
IFrameのjQueryを使用して、できるだけ早くiframeの本体の高さを測定し(onDOMReady)、URLハッシュをその高さに設定します。また、親ドキュメントで、iFrameの場所を調べて必要な値を抽出するonload
イベントをiFrameタグに追加します。 onDOMReadyは常にドキュメントの読み込みイベントの前に発生するため、競合状態が複雑になることなく、値が正しく通信されることを確信できます。
言い換えると:
... Help.phpで:
var getDocumentHeight = function() {
if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
location.hash = $('body').height();
// at this point the document address will be something like help.php#1552
}
};
$(getDocumentHeight);
...そして親文書内:
var getIFrameHeight = function() {
var iFrame = $('iframe')[0]; // this will return the DOM element
var strHash = iFrame.contentDocument.location.hash;
alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );
Chrome、Firefox、IE11で動作する次のものが見つかりました。
$('iframe').load(function () {
$('iframe').height($('iframe').contents().height());
});
Iframesコンテンツの読み込みが完了すると、イベントが発生し、IFramesの高さをコンテンツの高さに設定します。これは、IFrameと同じドメイン内のページでのみ機能します。
これを行うためにiframe内でjqueryは必要ありませんが、コードを非常に単純にするために使用します...
これをiframe内のドキュメントに入れます。
$(document).ready(function() {
parent.set_size(this.body.offsetHeight + 5 + "px");
});
小さなウィンドウのスクロールバーを削除するために上記の5つを追加しましたが、サイズが完全ではありません。
そしてこれはあなたの親文書の中にあります。
function set_size(ht)
{
$("#iframeId").css('height',ht);
}
JQueryを使用せずにこれを行うコードは、今日では簡単です。
const frame = document.querySelector('iframe')
function syncHeight() {
this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)
イベントのフックを解除するには:
frame.removeEventListener('load', syncHeight)
これは私のために働いた正しい答えです
$(document).ready(function () {
function resizeIframe() {
if ($('iframe').contents().find('html').height() > 100) {
$('iframe').height(($('iframe').contents().find('html').height()) + 'px')
} else {
setTimeout(function (e) {
resizeIframe();
}, 50);
}
}
resizeIframe();
});
シンプルなワンライナーは、デフォルトの最小高さから始まり、コンテンツサイズまで増加します。
<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
受け入れられた回答の$('iframe').load
はa.indexOf is not a function
エラーを生成します。以下に更新できます。
$('iframe').on('load', function() {
// ...
});
JQuery 1.8以降廃止された.load
に類似した他のいくつか: 「新しい基盤プロジェクトを開くときの「Uncaught TypeError:a.indexOfは関数ではありません」エラー