怎样在父页面里获取加载(iframe)另一个网页的高度(父页面获取iframe里面加载页面的高度)

Posted 2023-04-24

是子页面的高度哦

请在IE或火狐下调试以下代码，由于Chrome（谷歌）的iframe机制，不能在本地运行和iframe相关的js，需要架设到服务器或IIS上才有效果。

<script>
window.onload = function()
var height = window.frames["if"].document.body.scrollHeight;
alert(height);
;
</script>
<iframe id="if" src="1.html"></iframe>

追问

得不到啊 ，我用你的方法他根本不会弹出子页面的高度来，火狐浏览器上也是一样的
我想得到子页面的高度

追答

用IE试试。
还有frames["if"]里面的if换成你的iframe的id，别的就没有什么需要注意的了

参考技术A 可以在父页面中获取其中iframe的窗口对象, 通过子iframe的窗口对象来获取相关的信息.
假设在javascript中已经获得子窗口iframe对象为iframeWnd, 那么可以用contentWindow来获得子iframe的窗口对象:
iframeWnd.contentWindow
然后, 就可以像使用一个windows对象一样来获取你所需要的信息了.追问

我用你说的得不到子页面的高度
iframeWnd.contentWindow.document.body.offsetheight

追答

你的代码中offsetHeight第一个H应该大写.
获得窗口内容的高度是用documnt.body.offsetHeght; 如果你想获得子iframe窗口的可见区域的高度, 则需要使用document.body.clientHeight.
还有, 在你的脚本中要把iframeWnd替换成代码中具体的iframe对象; 如果代码还得不到你要的结果, 可以用window.alert方法看看获得的都是什么值, 是不是每个对象都有正确获得到.
还有一点: 你是在什么时候执行这样的代码的? 如果子iframe页面尚未载入, 应该不能获取到有效数据的, 因为那时候子iframe的页面尚未建立.

追问

我想根据获得iframe里面的子页面的高度然后动态设置iframe的高度，依旧得不到iframe里面子页面的高度

追答

你所谓的得不到是脚本运行有异常, 还是得到的值不正确?
你是在什么时候获取iframe里面子页面高度, 这个时候iframe中子页面已经载入完成了吗?

追问

我是这样的，我的左边是一个手风琴似的下拉列表，右边是一个div包起来的iframe,当我点击左边的列表里面的li时执行一个show()方法，show()方法里面是一个iframe加载页面，
比如： document.getElementById("iframeid").src = "b.html";我想在这句代码执行完毕后就得到iframe里面加载页面的高度

追答

问题就在这里, 你刚刚设置了iframe的src, 紧接着就要获取iframe中加载页面的高度, 这基本上不能获得正确的高度值, 因为iframe中的页面尚未加载完成.
可行的方法是: 在设置iframe的src之后, 开启一个定时器, 在此定时器中检查ifame子页面是否加载完成或获取子窗口高度;
如果iframe加载的子页面也为你自己开发, 那么在该子页面的onload事件处理中调用父窗口(用window.parent获取父窗口)的方法来调整iframe的高度.

页面中多个iframe是不是会影响性能？

参考技术A 理论上是的，因为一个iframe里引用的就是一个网页。

本来只打开一个网页，但你的网页上用了10个iframe，得再从别的地方引用10个网页。

网速快倒是感觉不出来了，网速慢的话很明显的。还要看被引用的网页里图的多少、脚本的多少之类的。 参考技术B 不会 只要你把iframe放到相应的布局位置
比如引用一个头部 一个底部