当iframe内容的高度更改（同一域）时自动调整iframe高度 [英] Auto resize iframe height when the height of the iframe contents change (same domain)

问题描述

我在网页中加载iframe，其中iframe的内容长度会不时更改。我已经实现了以下解决方案。但是高度是固定的，因为dyniframesize只有在iframe.onload时调用。

I am loading an iframe inside a page, which the length of the content of the iframe will be changed from time to time. I have implemented the following solution. However the height is fixed as the dyniframesize only get call when iframe.onload.

可以随时调整iframe的大小， iframe改变了？

It is possible to have the iframe to be resized accordingly from time to time the height of the iframe changed?

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

推荐答案

据我所知，但是有一些选项。

To my knowledge, there isn't a very natural way of doing this, but there are some options.

您可以使用 setInterval（）重复检查iframe的内容高度，并根据需要进行调整。

You could use setInterval() to repeatadly check the iframe's content height and adjust it if needed. This is simple, but inefficient.

iframe内容中的任何内容更改高度）通常由某些事件触发。即使您要添加来自iframe外部的内容，例如，添加可能是由按钮点击触发的。 此处的实时演示（点击）。

Any change of content in the iframe's content (and therefore height) is usually triggered by some event. Even if you're adding content from outside of the iframe, that "add" is probably triggered by a button click, for example. Here's something that might work for you: 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).

这很简单，应该抓住相关的变化。如果没有，你可以结合它与上面的事件监听器解决方案，以确保事情更新！

It's really simple and should catch the relevant changes. If not, you could combine it with the event listener solution above to be sure things are updated!

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

荣誉提及：溢出/下溢事件。

阅读

Honorable mention to: overflow/underflow events.

Read about it here (there's A LOT to it).

和 查看我的演示 （在IE 11中无法使用。）

and see my demo here (doesn't work in IE 11!).

> 是一个很酷的解决方案，但它不再在IE中工作。它可能可以调整它，但我宁愿使用上述解决方案之一，即使我不得不后退到1秒 setInterval 旧版浏览器，只是因为它比这个解决方案简单得多。

This was a cool solution, but it's no longer working in IE. It might be possible to tweak it, but I'd rather use one of the above solutions, even if I had to fallback to a 1 second setInterval for older browsers, just because it's a lot simpler than this solution.

这篇关于当iframe内容的高度更改（同一域）时自动调整iframe高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！