我在一个页面中加载一个 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>
最佳答案
据我所知,没有一种非常自然的方法可以做到这一点,但有一些选择。
设置间隔()
您可以使用 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
它真的很简单,应该捕捉到相关的变化。如果没有,您可以将它与上面的事件监听器解决方案结合使用,以确保更新内容!
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
,只是因为它比这简单得多解决方案。
关于javascript - 当 iframe 内容的高度改变时自动调整 iframe 高度(同域),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20789198/