内容に合わせてiframeの幅と高さを調整します


300

私はのためのソリューション必要な自動調整widthheightiframeかろうじてその内容に合うようにします。ポイントは、iframeロードされた後に幅と高さを変更できることです。iframeに含まれるボディの寸法の変化に対処するためのイベントアクションが必要だと思います。



受け入れられた回答は機能しません。stackoverflow.com/a/31513163/482382を
Steven Shaw

回答:


268
<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

8
@StoneHeart:はい、クロスブラウザです。contentWindowプロパティはDOM仕様で定義されていないため、コードは非標準に準拠しています。DOM仕様にはcontentDocumentと呼ばれるプロパティが存在しますが、Internet Explorer 6(および7)ではサポートされていません。contentWindowプロパティを代わりに使用でき、すべての一般的なブラウザー(Gecko、Opera、Webkit、IE)に実装されます。
ラファエル

30
if(document.getElementById)の用途は何ですか?
アリー

55
また、クロスドメインではないことも忘れないでください。ある種のエラーが発生する理由ドメインが異なる場合、プロパティ「ドキュメント」へのアクセスが拒否されました。解決策はここにあります
Pierre de LESPINAY

15
条件は役に立たないだけでなく、まれな状況で問題が発生することが保証されています。メソッドが存在するかどうかを確認し、そのメソッドをチェック外で使用するのはなぜですか?
JS

6
私はあなたが意味を考えるDOMContentLoadedために、DOMContentReady:の事ではないようですdeveloper.mozilla.org/en-US/...
マックスHeiber

46

クロスブラウザjQueryプラグイン

コンテンツに合わせてiFrameのサイズを維持し、iFrameとホストページの間で通信するために使用するクロスクワザー、クロスドメインライブラリ。jQueryの有無にかかわらず動作します。mutationObserverpostMessage


3
iframe-resizerライブラリは、最も堅牢なソリューションです。
kwill

35

これまでに与えられたすべてのソリューションは、一度限りのサイズ変更を説明します。内容が変更された後にiFrameのサイズを変更できるようにする必要があると述べました。これを行うには、iFrame内で関数を実行する必要があります(内容が変更されたら、内容が変更されたことを通知するイベントを発生させる必要があります)。

iFrame内のコードはiFrame内のDOMに限定されているように見え(iFrameを編集できなかった)、iFrameの外で実行されたコードはiFrameの外のDOMで動かなかった(そしてt iFrame内からのイベントを取得します)。

解決策は、jQueryにどのDOMを使用するかを通知できることを(同僚の支援により)発見したことから生まれました。この場合、親ウィンドウのDOM。

そのため、このようなコードは必要なことを実行します(iFrame内で実行した場合)。

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

これの完全なコードは何でしょうか?スクリプトがiframe htmlに入ると思いますか?
Andrew Hundt、

これは完全なコードであり、はい、iFrameのHTML内で実行されます。「window.parent.document」の部分は、jQueryセレクターが、現在のドキュメント(iFrame内にある)ではなく、親ドキュメントのDOMを使用することを指定しています。
Garnaph 2013

13
親ドキュメントとiframe内のドキュメントの両方が同じドメインにある場合、これは美しく機能します。そうでない場合(またはChromeの場合、両方がローカルファイルの場合)、ブラウザの「同じ生成元」のセキュリティポリシーが適用され、iframeのコンテンツが親ドキュメントを変更するのを防ぎます。
user56reinstatemonica8 2014年

1
このようなクロスドメインをクロスドメインで作成しようとする場合は、window.postMessage(IE8 +)を調べて、ホスト(親)ドキュメントとソース(iframe内)ドキュメントの両方にカスタムスクリプトが必要になることに注意してください。jQuery postmessageプラグインが役立つかもしれません。ホストとソースでスクリプトが必要になるため、JSON-Pを使用してAJAXでホストにコンテンツをロードさせる方が簡単な場合があります。
user56reinstatemonica8 2014年

3
代わりにイベントを自動的に起動する方法はjQuery("#IDofControlFiringResizeEvent").click(function ()
Ben

33

埋め込み用のワンライナーソリューション:最小サイズから開始し、コンテンツサイズまで増加します。スクリプトタグは必要ありません。

<iframe src="http://URL_HERE.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>


実行コードスニペットがSafari 9.1.1で機能しない場合は、SOの問題が含まれている可能性がありますか?
Elensar 2016年

クロスドメインではありません。おそらくサーバーはフレーム化されたページにいくつかのヘッダーを追加する必要がありますか?
Finesse

ここで言及されているすべての回答はscrollHeight/scrollWidth、ボディマージンを考慮に入れるために少し調整する必要があります。ブラウザは、ドキュメントのbody要素にデフォルトのゼロ以外のマージンを適用します(フレームに読み込まれたコンテンツにも適用できます)。私が見つけた実用的な解決策はこれを追加することです:parseInt(window.getComputedStyle(this.contentDocument.body).margin
スタン

24

iframeコンテンツが同じドメインからのものである場合、これはうまく機能するはずです。ただし、jQueryは必要です。

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

動的にサイズを変更するには、次のようにします。

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

次に、iframeがロードするページにこれを追加します。

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

オリジンが別のドメインからのものであるときにこれを行う簡単な方法はありますか?
BruceJohnJennerLawso

15

jQueryを使用したくない場合のクロスブラウザーソリューションは次のとおりです。

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}

1
それは奇妙です。私にとっては、iframeの非常に奇妙な幅を計算します。コンテンツの幅は750で、300と計算されます。なぜアイデアがあるのですか?
Rob

私はこのコードで遊んだ(高さオプションを追加)。iFrameの高さを100%に設定すると、約200pxに制限されます。iFrameの高さを600pxに設定すると、それがそのまま残ります。@RobertJagodaあなたはこれに対する解決策を得ましたか?
iaindownie 2013

9

私が地球上のすべてを試した後、これは本当に私にとってうまくいきます。

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

それは言う:Uncaught TypeError:$はHTMLIFrameElement.onload((index):204)でautoResize((index):200)の関数ではありません
Michael Rogers

2
@Michael Rogers $との競合があるか、jQuery.jsファイルを含めるのを忘れています。汎用的な関数stackoverflow.com/questions/6109847/…を使用するか、$をjQueryに置き換えます
Adrian P.

8

このコードを使用して、ページに読み込まれるときに、すべてのiframe(autoHeightクラス)の高さを自動調整します。テスト済みで、IE、FF、Chrome、Safari、Operaで動作します。

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

2
あなたが追加しているこの魔法35は何ですか?どのブラウザとOSで測定しましたか?
h2stein 2012年

35ピクセルを追加した理由がわかりません。しかし、FF、IE(7、8、9)、およびChromeでテストしたことは確かにわかり、問題なく動作しました。
ペトリク2012年

3
35はスクロールバーの厚さだと思います
Sadegh

これを機能させるには、少し調整する必要がありました-setHeight(iframe)と呼ばれます。直接(それは約$(インラインフレーム).LOAD()のラッパーを削除。
shacker

追加された魔法の35ピクセルは、iframeパディングを考慮に入れるためのものです。iframeにはパディングを含めないでください。iframeのコンテンツはこれに対処する必要があります。
Filipe Melo

5

これは確かな証明ソリューションです

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

3

上記のGarnaphの優れたソリューションを少し変更しました。彼のソリューションは、イベントの直前のサイズに基づいてiframeのサイズを変更したようです。私の状況(iframe経由のメール送信)では、送信直後にiframeの高さを変更する必要がありました。たとえば、送信後に検証エラーまたは「ありがとう」メッセージを表示します。

ネストされたclick()関数を削除して、iframe htmlに入れました。

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

私にとってはうまくいきましたが、クロスブラウザ機能についてはわかりません。


3

IFRAMEコンテンツと親ウィンドウの両方を制御できる場合は、iFrame Resizerが必要です。です。

このライブラリにより、同じドメインとクロスドメインのiFrameの高さと幅を自動的にサイズ変更して、含まれるコンテンツに合わせることができます。これには、iFrameの使用に関する最も一般的な問題に対処するためのさまざまな機能が用意されています。

  • iFrameのコンテンツサイズへの高さと幅のサイズ変更。
  • 複数のネストされたiFrameで動作します。
  • クロスドメインiFrameのドメイン認証。
  • 複雑なCSSレイアウトをサポートするためのさまざまなページサイズ計算方法を提供します。
  • MutationObserverを使用してページのサイズを変更する可能性のあるDOMの変更を検出します。
  • ページのサイズ変更を引き起こす可能性のあるイベント(ウィンドウのサイズ変更、CSSアニメーションと遷移、向きの変更、およびマウスイベント)を検出します。
  • postMessageを介したiFrameとホストページ間のメッセージングの簡素化。
  • iFrameのページリンクを修正し、iFrameと親ページ間のリンクをサポートします。
  • カスタムのサイズ変更とスクロールのメソッドを提供します。
  • 親の位置とビューポートサイズをiFrameに公開します。
  • ViewerJSと連携してPDFおよびODFドキュメントをサポートします。
  • IE8へのフォールバックサポート。

2

上記の方法では、すべてが機能するわけではありません。

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

環境:IE 10、Windows 7 x64


2

私はいくつかの実験の後に別の解決策を見つけました。私は最初、この質問に対する「ベストアンサー」としてマークされたコードを試しましたが、機能しませんでした。私の推測では、当時の私のプログラムのiframeは動的に生成されていました。これが私が使用したコードです(私にとってはうまくいきました):

ロードされているiframe内のJavaScript:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

スクロールバーを削除するには、高さに4ピクセル以上を追加する必要があります(奇妙なバグ/ iframeの影響)。幅はさらに奇妙です、あなたは体の幅に18pxを追加しても安全です。また、iframeボディのCSSが適用されていることを確認してください(下記)。

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

iframeのhtmlは次のとおりです。

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

これが私のiframe内のすべてのコードです。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

私はChromeでテストし、Firefoxで少しテストしました(Windows XPの場合)。まだテストが必要なので、これがどのように機能するか教えてください。


これは私がテストしたものからモバイルブラウザで素晴らしい作品に感謝します、そしてそれは私がサイズ変更されているiframeで問題を抱えていた場所です!
Mircea Sandu

あなたがそれを気に入ってくれてうれしい:-)私は、大部分のiframeがAjaxよりもはるかに効率的で、より優れたブラウザサポートを提供していることを発見しました。
www139 2015

1
ありがとうございました!!!主な理由は、人々が知らないことを想定せずにコードを配置する場所を指定したのはあなただけだからです。このシンプルなソリューションは、Wordpressサイトの同じドメインで動的コンテンツをフレーミングするために、私(Firefox、Chrome、Edge)に対して完全に機能しました。さまざまな長さの動的コンテンツを出力するフォーム選択があります。iFrameは美しく調整されます。.clientHeight + 5 + 'px'を微調整する必要がありました。およびclientWidth + 18 + 'px'; より多くのピクセルになります。そして、なぜdisplay:tableなのかわかりません。CSSが必要だったので、目的のためにコメント化しました。再度、感謝します。
Heres2u

1

これは私がそれをする方法です(FF / Chromeでテストされています):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

マイクロソフトがそれを気にしない場合、誰が気にする必要がありますか?
m3nda 2015年

1

ここにいくつかの方法があります:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

その他の代替案

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

上記の2つの選択肢でスクロールを非表示にするには

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

セカンドコードでハック

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

iFrameのスクロールバーを非表示にするには、親を "overflow:hidden"にしてスクロールバーを非表示にし、iFrameを最大150%の幅と高さにして、ページの外側にスクロールバーを強制します。スクロールバーがあると、iframeがページの境界を超えることは期待できません。これにより、iFrameのスクロールバーが全幅で非表示になります。

ソース:iframeの自動高さを設定


あなたが挙げた例は、すべての内部コンテンツに合わせてiframeの高さを自動サイズ変更するためではなく、iframeを完全なコンテンツにするためのものです。それは質問に答えません。
nickornotto


1

私はこのリサイザがうまく機能することを発見しました:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

スタイルオブジェクトが削除されていることに注意してください。


Chrome / Win10では動作しません-コンテンツの一部が切り取られています。
glenneroo

1

jQueryでは、これは私にとって最良のオプションであり、本当に私を助けます!! お役に立てれば幸いです。

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

1

環境

私はこれをWeb拡張のコンテキストで自分で行わなければなりませんでした。このWeb拡張機能は、UIの一部を各ページに挿入し、このUIは内にありiframeます。内部のコンテンツiframeは動的であるため、幅と高さを再調整する必要がありましたiframe自分自身のました。

私はReactを使用していますが、コンセプトはすべてのライブラリに適用されます。

私の解決策(これは、ページとiframeの両方を制御することを前提としています)

内部では、スタイルiframeを変更bodyして本当に大きな寸法にしています。これにより、内部の要素が必要なすべてのスペースを使用してレイアウトできるようになります。作るwidthheight(IFRAMEがデフォルトを持っているので、私は推測する100%は私のために動作しませんでしたwidth = 300pxheight = 150px

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

次に、div内にすべてのiframe UIを挿入し、いくつかのスタイルを指定しました

#ui-root {
  display: 'inline-block';     
}

この中にアプリをレンダリングした後#ui-rootReactではこれを内部で行いますcomponentDidMount)、このdivのサイズを計算し、次を使用してそれらを親ページに同期しますwindow.postMessage

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

親フレームでは、次のようにします。

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

素敵な解決策!ありがとう!
redelschaap

0

存在しないかのように動作する「ゴーストのような」IFrameを作成することは可能です。

見る http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/をください

基本的に、でparent.postMessage(..)説明されて いるイベントシステムを使用します。 https://developer.mozilla.org/en-US/docs/DOM/window.postMessageでます。

これはすべての最新のブラウザで動作します!


0

投稿が古いことは知っていますが、これは別の方法だと思います。私は自分のコードに実装しました。ページの読み込みとページのサイズ変更の両方で完全に機能します。

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

0

ヘッダーに配置するJavascript:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

ここにiframe htmlコードがあります:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

CSSスタイルシート

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

0

angularjsディレクティブ属性の場合:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

パーセンテージに注意してください。iframe、テキスト、広告などに対して通常行われるスケーリングに対抗できるように挿入しました。スケーリングが実装されていない場合は、単に0を入れてください。


0

これは私がオンロードしたとき、または物事が変わったときの方法です。

parent.jQuery("#frame").height(document.body.scrollHeight+50);

0

明らかに多くのシナリオがありますが、ドキュメントとiframeに同じドメインがあり、iframeコンテンツの最後にこれを追加することができました。

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

これにより、親コンテナーが「検索」され、長さが50ピクセルのファッジファクターに追加されてスクロールバーが削除されます。

ドキュメントの高さの変化を「観察」するものは何もありません。これは、私のユースケースでは必要ありませんでした。私の答えでは、親/ iframeコンテンツにベイクされたIDを使用せずに親コンテナーを参照する手段を提供します。


0

あなたが一緒に暮らすことができる場合は、固定アスペクト比、あなたが希望応答のiframeを、このコードはあなたに有用であろう。それは単なるCSSルールです。

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

iframeにはコンテナーとしてdivが必要です。

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

ソースコードは、これに基づいているサイトベン・マーシャルは良い説明があります。


-1

シンプルさ:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

-1

コンテンツが非常に単純なHTMLの場合、最も簡単な方法はJavaScriptでiframeを削除することです

HTMLコード:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

JavaScriptコード:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

1
これにより、親ドキュメントのアウトラインが変更されます。別のドキュメントをfigcaption付きの図として作成したい場合、これはドキュメントのアウトラインを簡潔に保ちません。さまざまな使用例ですが、概要の理由により、コードスニペットをiframeに移動したいと考えました。
ヘンリーの猫

-2
<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>

これはCSSではなく、JSです。
クリフグリフィン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.