Javascript 使用Jquery将iframe调整为内容

我正在尝试动态调整iframe的大小以适应其内容。为此，我有一段代码：

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

它不起作用。是因为跨域问题吗？我怎样才能使它合身？请看一看小提琴：

---

ps我已经设置了链接的html和主体

高度：100%
您可以执行以下操作：


在iFrame中，使用document.parent.setHeight（myheight）将iFrame中的高度设置为父级。这是允许的，因为它是子控件。从父级调用函数

在父级中，创建一个函数setHeight（iframehight），用于调整iFrame的大小


另请参见：

您只需在iframe
load
事件上应用代码，因此此时已知道高度，代码如下：

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

见工作。这个演示在jsfiddle上运行，因为我已经将iframe url设置为与jsfiddle结果iframe相同的域中的url，即
fiddle.jshell.net
域

更新：

@尤斯：
你的页面似乎因为一个奇怪的原因没有得到正确的主体高度，因此尝试使用主要元素的高度，如下所示：

$(document).ready(function() {
    $("#IframeId").load(function() {
            var h = $(this).contents().find("ul.jq-text").height();
            h += $(this).contents().find("#form1").height();
            $(this).height( h );
        });
});

不确定为什么@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的大小

经过测试

使用
$（'iframe'）。在（'load'）上，…
只能间歇工作。请注意，如果要在某些浏览器中缩小到默认的
iframe
高度以下，则最初必须将大小设置为高度
0
像素。
只需在HTML标记上执行即可

$("#iframe").load(function() {
    $(this).height( $(this).contents().find("html").height() );
});

根据iframe的主体高度，在加载时调整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";

        }   
    })  
} 

由于问题的答案是使用已经过时的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);
})

我忘了在url:moskah/links上提到，你可以保存链接，比如：请尝试一下，你会明白列表会变得越来越大，用简单的javascript也会这样看：嗨，我真的不明白这一点，而且似乎有点复杂。我只是希望修改我的小代码。跨浏览器不是一个真正的问题因为iframe网站是我的。我之所以提到它，是因为它在JSFIDLE上不起作用（我应该解释一下，这是我的错），正如我所说的，它是同一个域（moskah.nl），为什么不使用PHP
include
或ASP.NET
ContentPanel
？如果我可以问的话？因为我不知道那是什么：）而且我认为（不，我确信）这只需要几行代码就可以解决。我会在找到它时发布它，它对我不起作用…看看它都在同一个域moskah上。NL这在我安装的浏览器中对我起作用，即chrome 22和firefox 15，我还没有测试IE，谢谢你的报告。@Youss你没有像我的代码那样使用加载事件，请查看我答案的更新，并粘贴相同的代码替换您的代码。@Nelson不，对不起，请查看课程代码。您将看到我放置了您的代码：@Youss似乎出于某种奇怪的原因，您的links.html页面报告的体高不正确，请尝试使用我在更新中添加的解决方法。这为我省去了很多麻烦！谢谢！