<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{border:0px; margin:0px; padding:0px;}
</style>
<title>首页</title>
</head>
<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://xxx.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://xxx.xxx.com这个页面显示并不完整。iframe的高度并没有实现适应http://xxx.xxx.com页面。使用火狐调试的时候发现,js出现了异常,结果进入了上面js代码中的“catch (e){}”这一部分代码了。当然没有成功设置iframe元素的height的值了。火狐提示了另外一个有用的信息,大致是说:js没有权限。
后来,同样的代码,上传到服务器上能够成功设置高度。而在本地使用的时候就出现异常。通过查看资料得出,原来是由于该文件与http://xxx.xxx.com不在同一个域下面,出现了跨域读取权限的问题。