我在页面中加载iframe,iframe的内容长度会不时更改.我已经实现了以下解决方案.但是高度是固定的,因为dyniframesize只在iframe.onload时调用.
可以相应地调整iframe的大小,以便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; } } }
m59.. 7
据我所知,没有一种非常自然的方法,但有一些选择.
您可以使用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秒,只是因为它比这个解决方案简单得多.
我编写了一个使用mutationaObserver和eventListners的小型库,其后退为IE8-10的setInterval,适用于同一域和跨域.它可以调整高度和宽度.
http://davidjbradshaw.github.io/iframe-resizer/
据我所知,没有一种非常自然的方法,但有一些选择.
您可以使用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秒,只是因为它比这个解决方案简单得多.