正文
如何同步iframe与嵌入内容的高度
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
最近频繁的做一些通过iframe在a页面嵌入b页面需求。总结下来，有以下问题需要解决
1.如何同步iframe与嵌入内容的高度
2.将b页面载入到a页面后，如何隐藏掉b页面上的元素，如左导航，顶部导航等等
-如何同步iframe与嵌入内容的高度
a)获取由iframe引入的页面高度
contentWindow返回的是嵌入到中页面的window对象。可以通过这个window对象获取到网页的高度。contentWindow支持所有主流浏览器。
contentDocument返回的是嵌入页面的document对象。
b)同步引入页面与iframe的高度
将获取到的高度赋值给iframe
demo
<iframe src="http://jsbin.com/nobefis" id="currentFrame" width="100%" scrolling="no" frameborder="no"></iframe> <script>
function resizeFrameHeight(currentFrame){
if(currentFrame){
var iframeObj = currentFrame.contentWindow;//获取iframe引入网页的window对象,进而通过window对象获取引入内容的document对象
if(iframeObj.document.body){
currentFrame.height = iframeObj.document.body.scrollHeight;
}
}
} window.onload = function () {
resizeFrameHeight(document.getElementById("currentFrame"))
}
</script>
HTMLIFrameElement.contentWindow
window.frames
HTML IFrameElement
iframe
contentWindow for an iframe
js操作iframe里的dom
