iframeのコンテンツの高さを自動的にリサイズするように設定

iframeのコンテンツの高さを変更する簡単な解決策を探していました。iframeのコンテンツの高さを自動的にリサイズするように設定

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

2011-08-11 Paul

私は試していませんでしたが、そうしてはいけないと思います。異なるdomaを通してjavascriptにアクセスすることはできません。イン。 –

サイズが正しく設定されていない場合、iFrameのページの最後に

が必要な場合があります。フロートのため：左; – CodingYourLife

：だからあなたはiframeのページにいくつかのコードを追加しなければならないことを意味。単にIFRAMEであなたのコードにこのスクリプトを追加します。保持ページで

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

を：ページでは（ID =「myiframe」と私の場合）はiframeを保持する小さなJavaScriptを追加します。

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

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

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

親ウィンドウは数字を受け取り、スクロールバーを避けるために32を追加し、iframeの高さを新しい数値に設定します。

それだけです。他に必要なものはありません。

しかし、あなたはいくつかのより小さなトリックを知りたい場合は、IFRAMEの読み込み...

DYNAMIC高さに保ちますか？ コンテンツを切り替えたい場合は、iframeの高さが変更されます（ページの再読み込みとオンロードのトリガーなし）。ただ追加し、そのスクリプトに

<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コード：私の場合には（と思う...）

コンプリート保持ページのコード私は同じフォルダにそれらを持っていたが、それはあまりにも、クロスドメインを動作するはずですこのiframeは "theiframe"という名前です。HTM "）

<!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>

Demo

出典

2014-04-14 21:01:53 Paul

これはうまくいくように見えますが、クロスドメインでは機能しません。完全なクロスドメイン方法については、次の例を参照してください。 http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-contentクロスドメインを行う際に役立つ、より堅牢なライブラリをご覧ください。 http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/また、mutationObserverを使用してiFrameのサイズを変更するコンテンツを保持するこのライブラリと、 'postMessage'がクロスドメインの問題。 https://github.com/davidjbradshaw/iframe-resizer – Lucas

@david bradshawは、サーバー設定を調整しないであなたのスクリプトがクロスドメインで動作しますか？ – Lucas

はい、iframeと親ページの間でpostMessageを使用します。 –

シンプルなソリューション：

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

のiframeと親ウィンドウが同じドメイン内にあるとき、これは作品2がでているときは動作しません。別のドメイン。

出典

2015-12-16 16:40:22

ロック！どうもありがとうございます！ – Erick

iframeのコンテンツの高さを自動的にリサイズするように設定

答えて

関連する問題