js实现自动设置框架载入页面高度的问题

来源：互联网发布：学java web看什么书编辑：程序博客网时间：2024/06/08 20:11

<body>
<script type="text/javascript">

function setHeight(){
var iframe = document.getElementById("middle");
try{
var aHeight = iframe.contentWindow.document.body.scrollHeight;
var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(aHeight, bHeight);//取最高值;
iframe.height = height;
}catch (e){}
}

</script>

<iframe name="middle" id="middle" src="http://www.xxx.com" frameborder="0" border=0 scrolling="no" style="display:block; margin:0 auto;" width="100%" onload="this.height=1000;setHeight();"></iframe>
</body>

</html>

问题：发现所载入的http://www.xxx.com这个页面显示并不完整。iframe的高度并没有实现适应http://www.xxx.com页面。使用火狐调试的时候发现，js出现了异常，结果进入了上面js代码中的“catch (e){}”这一部分代码了。当然没有成功设置iframe元素的height的值了。火狐提示了另外一个有用的信息，大致是说：js没有权限。

后来，同样的代码，上传到服务器上能够成功设置高度。而在本地使用的时候就出现异常。通过查看资料得出，原来是由于该文件与http://www.xxx.com不在同一个域下面，出现了跨域读取权限的问题。