web-dev-qa-db-ja.com

Iframeの幅と高さをその内容に合わせて調整する

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

javascripthtmliframeadjustment
263
StoneHeart
<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>
253
Ahmy

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

クロスボーザー、クロスドメインlibraryiFrameのサイズをコンテンツに合わせるためにmutationObserverを、iFrameとホストページ間の通信にpostMessageを使用します。 jQueryの有無にかかわらず動作します。

44
FFish

これまでに示したすべての解決策は、一回限りのサイズ変更のみを考慮しています。内容が変更された後にiFrameのサイズを変更できるようにしたいと述べました。これを行うには、iFrame内で関数を実行する必要があります（いったん内容が変更されると、内容が変更されたことを伝えるためにイベントを発生させる必要があります）。

IFrameの内側のコードはiFrameの内側のDOMに限定されていて（そして編集できなかった）、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>
32
Garnaph

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>
23
brenjt

埋め込み用のワンライナーソリューション：最小サイズから始めて、コンテンツサイズまで拡大します。スクリプトタグは不要です。

<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>
22
Guy

あなたが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;
}
15
Timo

このコードを使用して、すべての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();
});
8
petriq

私が地球上ですべてを試した後に、これは本当に私のために働きます。

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>
6
Adrian P.

これは確かな解決策です

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>
4
Mas

いくつかの方法があります。

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

2番目のコードでハッキング

<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のスクロールバーを全幅で隠します。

出典：set iframe auto height

3
T.Todua

上記の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
udackds

上記の方法ではすべてが動作することはできません。

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 x 64

2
Kevin

もしあなたがIFRAMEコンテンツと親ウィンドウの両方をコントロールできるのなら、あなたは iFrame Resizer が必要です。

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

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

私はいくつかの実験の後に別の解決策を考え出した。私はもともとこの質問に対する「ベストアンサー」とマークされたコードを試してみましたが、うまくいきませんでした。私の推測は、当時の私のプログラムの私の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>

私はクロムでテストし、Firefoxで（Windows XPで）少しテストしました。まだテストが必要なので、これがどのように機能するかを教えてください。

1
www139

私はこのリサイズがよりうまくいくことがわかりました：

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;

}

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

1
BabaRick

誰かがここに来た場合：iframeからdivを削除したときに解決策に問題がありました - iframeは短くなりませんでした。

仕事をするJqueryプラグインがあります。

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

1
Sarah Sh

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
Kike Gamboa

それが存在しなかったように振る舞う「ゴーストのような」IFrameを作ることは可能です。

http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/ を参照してください。

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

これは現代のすべてのブラウザで動作します。

0
Calciol

コンテンツが非常に単純な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;
}
0
Daniel Katz

コンテキスト

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

React を使用しますが、この概念はすべてのライブラリに適用されます。

私の解決策（これはあなたがページとiframeの両方を制御していることを前提としています）

iframeの内側で、私はbodyスタイルを本当に大きな次元を持つように変更しました。これにより、内部の要素を必要なスペースすべてを使用してレイアウトできます。 widthとheightを100％にしてもうまくいきませんでした（iframeにはデフォルトのwidth = 300pxとheight = 150pxがあるためと思います）

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

それから私はdivの中にすべてのiframe UIを注入し、それにいくつかのスタイルを与えました

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

この#ui-root内に自分のアプリをレンダリングした後（in React 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)
0
bboydflo

これは私がしたのと同じ方法です。

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

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';
        } );
    }
};
} );

割合に注意してください、私はあなたがスケーリングが実装されていない場合は単純に0を置くあなたがiframe、テキスト、広告などのために通常行われるスケーリングに対抗できるようにそれを挿入

0
Tino Costa 'El Nino'

これが私のやり方です（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>
0
Latheesan

ヘッダーに配置される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
Alin Razvan

明らかに多くのシナリオがあります、しかし、私はドキュメントとiframeのために同じドメインを持っていました、そして、私は私のiframeコンテンツの終わりまでこれに取り組むことができました：

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

これは親コンテナを「見つけ」、スクロールバーを削除するために50ピクセルのファッジファクターを追加して長さを設定します。

文書の高さの変化を「観察する」ためのものは何もありません。これは私のユースケースでは必要ありませんでした。私の答えでは、私は親/ iframeコンテンツに焼き付けられたIDを使わずに親コンテナを参照する手段を持っています。

0
Henry's Cat

私はその記事が古くなっていることを知っていますが、これはそれを行うもう一つの方法であると信じています。私は自分のコードに実装しました。ページの読み込みとページのサイズ変更の両方で完璧に機能します。

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
Gabriel Ferraz