使用Jquery调整iframe大小以适应内容

Question

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

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

它不起作用。这是否是跨域问题所致？如何使其适应？请看Fiddle：JsFiddle

附注：我已将链接的html和body设置为height：100％;

- Youss

---

我忘了提到在url：moskah/links上，你可以保存像http://facebook.com这样的链接。请尝试一下，你就会明白列表会变得越来越大。 - Youss

请参考以下使用简单JavaScript的方法：https://dev59.com/amox5IYBdhLWcg3wf0fl#9163087 - Aristos

Answer 1

你只需要在 iframe 的 load 事件上应用你的代码，这样高度就已经在那个时候知道了，代码如下：

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

请查看可工作的演示。该演示在 jsfiddle 上工作，因为我已将 iframe url 设置为与 jsfiddle 结果 iframe 相同域的 url，即 fiddle.jshell.net 域名。

更新：
@Youss： 似乎您的页面因某种原因无法正确获取 body 高度，因此请尝试使用主要元素的高度，如下所示：

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

---

嗨，对我来说不起作用...看一下http://moskah.nl/er.html 它都在同一个域名moskah.nl上。 - Youss

这在我安装的浏览器中可以工作，即Chrome 22和Firefox 15，我还没有测试IE，感谢您的报告。 - Nelson

@Youss 您没有像我的代码一样使用load事件，请查看我的答案更新，并粘贴相同的代码替换您的代码。 - Nelson

@Nelson 不好意思，看一下课程代码，你会看到我放置了你的代码：http://moskah.nl/er.html - Youss

@Youss 看起来由于某种奇怪的原因，你的 links.html 页面没有正确报告正文高度，请尝试使用我在更新中提供的解决方法。 - Nelson

Answer 2

我不确定为什么 @Nelson 的解决方案在 Firefox 26 (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的大小。

已使用jQuery 1.10.2进行测试。

仅使用$('iframe').on( 'load', ...有时会起作用。请注意，如果要在某些浏览器中将其缩小到默认iframe高度以下，则初始大小必须设置为0像素高。

- Dave Jarvis

Answer 3

只需在HTML标签上操作即可，完美运作。

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

- Roy Shoa

Answer 4

您可以执行以下操作：

• 在iFrame中使用document.parent.setHeight(myheight)将iFrame内的高度设置为父级高度。由于它是子控件，所以允许这样做。从父级调用一个函数。

• 在父级中，创建一个名为setHeight(iframeheight)的函数，用于调整iFrame的大小。

另请参见：
如何使用Javascript从Iframe实现跨域URL访问？

- Niels

---

嗨，我真的不太理解这个，而且它似乎非常复杂。我希望只是修改我已经有的一点代码。跨浏览器并不是真正的问题，因为iframe网站是我的。我只是提到了它，因为它在JsFiddle上无法工作（我应该解释一下，我犯了个错误）。 - Youss

就像我说的一样，它是同一个域名（moskah.nl）。 - Youss

为什么不使用PHP的include或ASP.NET的ContentPanel呢？如果我问得可以的话？ - Niels

因为我不知道那是什么:) 而且我认为（不，我确信）这可以用几行代码解决。我找到它后会发布的。 - Youss

Answer 5

作为问题的答案，使用了已经过时的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);
})

- maximran

---

这个让我省了不少脑细胞！谢谢！ - Elly Post

Answer 6

根据其内容高度，在加载和调整大小时调整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";

        }   
    })  
} 

- GarryOne

Answer 7

最后，我提供了这个跨域解决方案，它也适用于调整大小的情况... （调整大小不触发：当iframe内容的高度发生变化时自动调整iframe高度（同一域）） < p > 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);
    }
});

- molokoloco