当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()

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

事件听众

某些事件通常会触发iframe内容(以及高度)内容的任何更改.即使你是从iframe外部添加内容,也可以通过按钮点击来触发"添加".这可能对你有用:在这里现场演示(点击).

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

现场演示(点击).

这很简单,应该抓住相关的变化.如果没有,您可以将它与上面的事件监听器解决方案结合起来,以确保更新内容!

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

值得一提的是:溢出/下溢事件.

在这里阅读它(有很多).

并在这里看到我的演示(在IE 11中不起作用!).

这是一个很酷的解决方案,但它不再适用于IE.有可能调整它,但我宁愿使用上述解决方案之一,即使我不得不setInterval为旧浏览器回退1秒,只是因为它比这个解决方案简单得多.

Answer 2

我编写了一个使用mutationaObserver和eventListners的小型库,其后退为IE8-10的setInterval,适用于同一域和跨域.它可以调整高度和宽度.

http://davidjbradshaw.github.io/iframe-resizer/