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外部添加内容，也可以通过按钮点击来触发“添加”。这可能适合您：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，只是因为它比这个解决方案简单得多。 / p>

Answer 2

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

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

Answer 3

iFrame查看

<script type="text/javascript">
    var height = $("body").outerHeight();
    parent.SetIFrameHeight(height);
</script>

主视图

<script type="text/javascript">
    SetIFrameHeight = function(height) {
        $("#iFrameWrapper").height(height);
    }
</script>

Answer 4

您可以使用自定义事件在iframe和父级之间发出信号。

在iframe：

中

if (window.parent !== window) {
  window.oldIframeHeight = 0;
  window.setInterval(function() {
      var currentHeight = document.body.offsetHeight;
      if (currentHeight !== window.oldIframeHeight) {
          window.parent.postMessage(currentHeight.toString(), "*");
          window.oldIframeHeight = currentHeight;
      }
  }, 100)
}

然后，在父母：

window.addEventListener("message", function (e) {
    var h = parseInt(e.data, 10);
    if (!isNaN(h)) {
        $('#iframe').height(h)
    }
}, false);

Answer 5

实际上，您应该通过访问父窗口并更改iframe的高度来从iframe执行此操作。

因为iframe中的文档通常更好地知道它的主体是否改变了它的大小（你实际上可以将它绑定到像body.onload这样的东西而不是使用间隔来检查iframe中是否有变化）。

当iframe内容的高度发生变化时，自动调整iframe高度（同一个域）

5 个答案:

的setInterval（）

事件监听器

突变观察员

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