js操作的跨域问题:js实现自动设置框架载入页面高度的问题

<!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不在同一个域下面，出现了跨域读取权限的问题。

posted @ 2011-02-20 22:13  王滔  阅读(1991)  评论(0)  编辑  收藏  举报