javascript - 当 iframe 内容的高度改变时自动调整 iframe 高度(同域)

Question

我在一个页面中加载一个 iframe，其中 iframe 内容的长度会不时更改。我已经实现了以下解决方案。然而，高度是固定的，因为 dyniframesize 仅在 iframe.onload 时被调用。

是否可以不时地调整 iframe 的大小，改变 iframe 的高度？

<iframe src ="popup.html" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"></iframe> 

function dyniframesize(down) { 
var pTar = null; 
if (document.getElementById){ 
pTar = document.getElementById(down); 
} 
else{ 
eval('pTar = ' + down + ';'); 
} 
if (pTar && !window.opera){ 
//begin resizing iframe 
pTar.style.display="block" 
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ 
//ns6 syntax 
pTar.height = pTar.contentDocument.body.offsetHeight +20; 
pTar.width = pTar.contentDocument.body.scrollWidth+20; 
} 
else if (pTar.Document && pTar.Document.body.scrollHeight){ 
//ie5+ syntax 
pTar.height = pTar.Document.body.scrollHeight; 
pTar.width = pTar.Document.body.scrollWidth; 
} 
} 
} 
</script> 

Answer 1

据我所知，没有一种非常自然的方法可以做到这一点，但有一些选择。

设置间隔()

您可以使用 setInterval() 重复检查 iframe 的内容高度并在需要时进行调整。这很简单，但效率低下。

事件监听器

iframe 内容(以及高度)中的任何内容更改通常由某些事件触发。例如，即使您从 iframe 外部添加内容，“添加”也可能是由单击按钮触发的。以下内容可能对您有用:Live demo here (click).

var myIframe = document.getElementById('myIframe');

window.addEventListener('click', resizeIframe);
window.addEventListener('scroll', resizeIframe);
window.addEventListener('resize', resizeIframe);

myIframe.contentWindow.addEventListener('click', resizeIframe);

function resizeIframe() {
  console.log('resize!');
}

变异观察者

此解决方案适用于所有最新的浏览器 - http://caniuse.com/mutationobserver

Live demo here (click).

它真的很简单，应该捕捉到相关的变化。如果没有，您可以将它与上面的事件监听器解决方案结合使用，以确保更新内容!

var $myIframe = $('#myIframe');
var myIframe = $myIframe[0];

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

myIframe.addEventListener('load', function() {
  setIframeHeight();

  var target = myIframe.contentDocument.body;

  var observer = new MutationObserver(function(mutations) {
    setIframeHeight();
  });

  var config = {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  };
  observer.observe(target, config);
});

myIframe.src = 'iframe.html';

function setIframeHeight() {
  $myIframe.height('auto');
  var newHeight = $('html', myIframe.contentDocument).height();
  $myIframe.height(newHeight);
}

荣誉奖:溢出/下溢事件。

Read about it here (有很多)。

和see my demo here (在 IE 11 中不起作用!)。

这是一个很酷的解决方案，但它不再适用于 IE。可以对其进行调整，但我宁愿使用上述解决方案之一，即使我不得不为旧版浏览器回退到 1 秒 setInterval，只是因为它比这简单得多解决方案。