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

简介: *{border:0px; margin:0px; padding:0px;}首页   function setHeight(){  var iframe = document.getElementById("middle");     try{       var aHeight = iframe.

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

目录
相关文章
|
4天前
|
开发框架 JavaScript 前端开发
JavaScript框架比较与选择:技术深度剖析
【7月更文挑战第23天】选择正确的JavaScript框架是项目成功的关键。React.js、Vue.js、Angular和Svelte等前端框架各有千秋,分别适用于不同的项目需求。同时,Node.js及其后端框架为服务器端开发提供了强大的支持。开发人员应根据项目的复杂性、性能要求、开发周期以及团队技能等因素综合考虑,选择最适合的框架。随着技术的不断发展,未来还将涌现更多优秀的JavaScript框架,为开发者带来更多选择和可能性。
|
16天前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
|
19天前
|
开发框架 监控 JavaScript
使用Node.js 框架( Express.js)来创建一个简单的 API 端点
【7月更文挑战第5天】使用Node.js 框架( Express.js)来创建一个简单的 API 端点
18 3
|
17天前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
16 0
JS代码动态打印404页面源码
|
22天前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
|
25天前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
30 1
|
25天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
24 1
|
17天前
|
存储 JavaScript 前端开发
WEB三大主流框架之Vue.js
WEB三大主流框架之Vue.js
|
17天前
|
测试技术 UED
断网之后的页面,Autox.js是点击还是上下滑动比较好?
断网之后的页面,Autox.js是点击还是上下滑动比较好?
|
17天前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应