11

コンテンツに合わせてiframeのサイズを動的に変更しようとしています。そうするために、私はコードの一部を持っています：

$("#IframeId").height($("#IframeId").contents().find("html").height());​

動作しません。クロスドメインの問題が原因ですか？どうすればフィットさせることができますか？フィドルを見てください：JsFiddle

psリンクのhtmlと本文を設定しましたheight:100%;

4

7 に答える 7

16

iframeイベントにコードを適用するだけでよいloadので、その時点で高さはすでにわかっているので、コードは次のようになります。

$("#IframeId").load(function() {
    $(this).height( $(this).contents().find("body").height() );
});

作業デモを参照してください。このデモはjsfiddleで機能します。これは、iframeのURLをjsfiddleの結果のiframeと同じドメイン（つまり、ドメイン）のURLに設定したためfiddle.jshell.netです。

更新：
@Youss：奇妙な理由でページの身長が正しくないようです。代わりに、次のように主要な要素の高さを使用してみてください。

$(document).ready(function() {
    $("#IframeId").load(function() {
            var h = $(this).contents().find("ul.jq-text").height();
            h += $(this).contents().find("#form1").height();
            $(this).height( h );
        });
});
于 2012-10-13T11:25:34.680 に答える
4

@NelsonのソリューションがFirefox26（Ubuntu）で機能しなかった理由はわかりませんが、次のJavascript-jQueryソリューションはChromiumとFirefoxで機能しているようです。

/**
 * Called to resize a given iframe.
 *
 * @param frame The iframe to resize.
 */
function resize( frame ) {
  var b = frame.contentWindow.document.body || frame.contentDocument.body,
      cHeight = $(b).height();

  if( frame.oHeight !== cHeight ) {
    $(frame).height( 0 );
    frame.style.height = 0;

    $(frame).height( cHeight );
    frame.style.height = cHeight + "px";

    frame.oHeight = cHeight;
  }

  // Call again to check whether the content height has changed.
  setTimeout( function() { resize( frame ); }, 250 );
}

/**
 * Resizes all the iframe objects on the current page. This is called when
 * the page is loaded. For some reason using jQuery to trigger on loading
 * the iframe does not work in Firefox 26.
 */
window.onload = function() {
  var frame,
      frames = document.getElementsByTagName( 'iframe' ),
      i = frames.length - 1;

  while( i >= 0 ) {
    frame = frames[i];
    frame.onload = resize( frame );

    i -= 1;
  }
};

これにより、特定のページのすべてのiframeのサイズが継続的に変更されます。

jQuery1.10.2でテスト済み。

使用$('iframe').on( 'load', ...は断続的にのみ機能します。一部のブラウザで0デフォルトの高さよりも低く縮小する場合は、サイズを最初に高さピクセルに設定する必要があることに注意してください。iframe

于 2013-12-29T05:37:33.173 に答える
3

あなたができることは次のとおりです。

  • iFrame内でdocument.parent.setHeight（myheight）を使用して、iFrame内の高さを親に設定します。子コントロールであるため、これは許可されます。親から関数を呼び出します。

  • 親内で、iFrameのサイズを変更する関数setHeight（iframeheight）を作成します。

参照：
Javascriptを使用してIframeからクロスドメインURLアクセスを実装するにはどうすればよいですか？

于 2012-10-13T11:05:43.723 に答える
2

HTMLタグでそれを行うだけで、完璧に機能します

$("#iframe").load(function() {
    $(this).height( $(this).contents().find("html").height() );
});
于 2016-07-31T12:25:59.857 に答える
1

質問への回答はすでに古いjqueryを使用しているため（loadは非推奨になり、.on（'load'、function（）{}に置き換えられました）、以下は質問の回答の最新のコードです。

私はscrollHeightとscrollWidthを使用していることに注意してください。これは、提供された答えのように、HeightとWidthを使用するよりもはるかにロードが良いと思います。もうスクロールせずに完全にフィットします。

$("#dreport_frame").on('load',function(){

  var h = $('#dreport_frame').contents().find("body").prop('scrollHeight');
  var w = $('#dreport_frame').contents().find("body").prop('scrollWidth');

  $('#dreport_frame').height(h);
  $('#dreport_frame').width(w);
})
于 2018-07-05T07:26:11.670 に答える
0

本体の高さに基づいて、読み込み時とサイズ変更時にiframeの高さを調整します。

var iFrameID = document.getElementById('iframe2');
var iframeWin = iFrameID.contentWindow;

var eventList = ["load", "resize"];
for(event of eventList) {
    iframeWin.addEventListener(event, function(){ 
        if(iFrameID) {
            var h = iframeWin.document.body.offsetHeight  + "px";
            if(iFrameID.height == h) {
                return false;
            }

            iFrameID.height = "";
            iFrameID.height = iframeWin.document.body.offsetHeight  + "px";

        }   
    })  
}
于 2016-08-31T12:05:49.463 に答える
0

最後に、サイズ変更にも機能するこのクロスドメインソリューションが付属しています...（サイズ変更はトリガーされません：iframeコンテンツの高さが変更されたときにiframeの高さを自動サイズ変更します（同じドメイン））

Iframe：

(function() {
    "use strict";
    var oldIframeHeight = 0,
        currentHeight = 0;
    function doSize() {
        currentHeight = document.body.offsetHeight || document.body.scrollHeight;
        if (currentHeight !== oldIframeHeight) {
            console.log('currentHeight', currentHeight);
            window.parent.postMessage({height:currentHeight}, "*");
            oldIframeHeight = currentHeight;
        }
    }
    if (window.parent) {
        //window.addEventListener('load', doSize);
        //window.addEventListener('resize', doSize); 
        window.setInterval(doSize, 100); // Dispatch resize ! without bug
    }
})();

親ページ：

window.addEventListener('message', event => {
    if (event.origin.startsWith('https://mysite.fr') && event.data && event.data.height)  {
        console.log('event.data.height', event.data.height);
        jQuery('#frameId').height(event.data.height + 12);
    }
});
于 2021-06-23T11:16:46.657 に答える