跨域和非跨域 获取iframe页面高度的方法
Posted 智取小师妹的博客
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域和非跨域 获取iframe页面高度的方法相关的知识,希望对你有一定的参考价值。
跨域方法:
第一步,在主页面里插入代码:
//假设主域名是www.aaa.com 需要插入的跨域域名为www.bbb.com
<iframe src="http://www.bbb.com/index.html" width="100%" height="100%" id="iframepage" name="iframepage" onLoad="iFrameHeight()" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <script type="text/javascript"> function iFrameHeight() { var iObj = parent.parent.document.getElementById(‘iframepage‘); iObjH = parent.parent.frames["iframepage"].frames["MiddleIframe"].location.hash; iObj.style.height = iObjH.split("#")[1] + "px"; } </script>
第二步,在跨域页面里(http://www.bbb.com/index.html)插入代码:
//需要在www.aaa.com下新建一个分目录/kuayu下的autoheight.html空文件,否则如果在根目录下建立html文件不确定会不会成功!
<iframe id="MiddleIframe" name="MiddleIframe" src="http://www.aaa.com/kuayu/autoheight.html" width="0" height="0" style="display: none;" onload="on_Height()"></iframe> <script type="text/javascript"> function on_Height(){ hashH = document.documentElement.scrollHeight; urlC = "/kuayu/autoheight.htm"; document.getElementById("MiddleIframe").src=urlC+"#"+hashH; } </script>
同域名下方法:
只需一步即可:
<iframe src="/abc/default.htm" id="iframepage" width="100%" height="100%" onload="iFrameHeight()"></iframe> <script type="text/javascript"> function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script>
以上是关于跨域和非跨域 获取iframe页面高度的方法的主要内容,如果未能解决你的问题,请参考以下文章
解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)