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

问题描述

我在页面内加载一个 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>功能dyniframesize(下){var pTar = null;如果(document.getElementById){pTar = document.getElementById(down);}别的{eval('pTar = ' + down + ';');}if (pTar && !window.opera){//开始调整iframe的大小pTar.style.display="块"if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){//ns6 语法pTar.height = pTar.contentDocument.body.offsetHeight +20;pTar.width = pTar.contentDocument.body.scrollWidth+20;}否则如果(pTar.Document && pTar.Document.body.scrollHeight){//ie5+语法pTar.height = pTar.Document.body.scrollHeight;pTar.width = pTar.Document.body.scrollWidth;}}}

解决方案

据我所知，没有一种非常自然的方式来做到这一点，但有一些选择.

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);函数 resizeIframe() {console.log('调整大小！');}

突变观察者

此解决方案适用于所有最新的浏览器 - 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 观察者 = 新的 MutationObserver(function(mutations) {setIframeHeight();});变量配置 = {属性:真实，childList: 真,字符数据:真，子树:真};观察者.观察(目标，配置)；});myIframe.src = 'iframe.html';函数 setIframeHeight() {$myIframe.height('auto');var newHeight = $('html', myIframe.contentDocument).height();$myIframe.height(newHeight);}

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

阅读在这里(有很多).

和 在这里查看我的演示(不在 IE 11 中工作！).

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

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.

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

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

Event Listeners

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

Mutation Observer

This solution works in all up-to-date browsers - 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).

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

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