web-dev-qa-db-ja.com

iframeコンテンツの高さを動的にサイズ変更するように設定します

私は、コンテンツを含むiframeの高さを変更する簡単なソリューションを探していました。

ルールは、iframeを保持しているページからiframeの高さを取得できないということです。これは明らかにセキュリティのためです。どうすればこれができますか？

iframeresizeheight
58
Paul

iframe：の場合、iframeページにコードを追加する必要があります。このスクリプトをIFRAMEのコードに追加するだけです。

<body onload="parent.alertsize(document.body.scrollHeight);">

保持ページ内： iframeを保持しているページ（私の場合はID = "myiframe"）に小さなjavascriptを追加します。

<script>
function alertsize(pixels){
    pixels+=32;
    document.getElementById('myiframe').style.height=pixels+"px";
}
</script>

現在、iframeが読み込まれると、親ウィンドウ（この場合はiframeを保持しているページ）でjavascriptがトリガーされます。

そのJavaScript関数に、その（iframe）高さのピクセル数を送信します。

親ウィンドウは数値を取得し、32を追加してスクロールバーを回避し、iframeの高さを新しい数値に設定します。

それだけです、他に何も必要ありません。

しかし、もっと小さなトリックを読み続けたいのであれば...

IFRAMEのダイナミックハイト？コンテンツを切り替えたい場合は、iframeの高さを変更します（ページの再読み込みとonloadのトリガーなし）。通常、オンラインで見つけた非常に単純なトグルスクリプトを追加します。

<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
}
</script>

そのスクリプトに追加するだけです：

<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>

上記のスクリプトの使用方法は簡単です。

<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>

カットアンドペーストしてそこから行くのが好きな人のために、ここに2つのページがあります。私の場合、私はそれらを同じフォルダに入れましたが、クロスドメインでも動作するはずです（私は思う...）

完全な保持ページコード：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
    pixels+=32;
    document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>

<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>

完全なiframeコード：（「iiframe.htm」という名前のこのiframe）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight);
}
</script>
</head>

<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END

</body>
</html>

デモ

12
Paul

簡単なソリューション：

<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>

これは、iframeと親ウィンドウが同じドメインにあるときに機能します。 2つが異なるドメインにある場合は機能しません。

1
M Fishbein