javascript iframe跨域详解


Posted in Javascript onOctober 26, 2016

1.什么引起了ajax跨域不能的问题

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。

2.有什么完美的解决方案么?

没有。解决方案有不少,但是只能是根据自己的实际情况来选择。

具体情况有:

一、本域和子域的相互访问: www.aa.com和book.aa.com
二、本域和其他域的相互访问: www.aa.com和www.bb.com 用 iframe
三、本域和其他域的相互访问: www.aa.com和www.bb.com 用 XMLHttpRequest访问代理
四、本域和其他域的相互访问: www.aa.com和www.bb.com 用 JS创建动态脚本

解决方法:

一、如果想做到数据的交互,那么www.aa.com和book.aa.com必须由你来开发才可以。可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌iframe一样,直接调用里面的JS就可以了。(这个办法我没有尝试,不过理论可行)

二、当两个域不同时,如果想相互调用,那么同样需要两个域都是由你来开发才可以。用iframe可以实现数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是http://domian/web/a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新,可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏览器只要改变hash就会记录历史,你在前进和后退时就需要处理,非常麻烦。不过再做简单的处理时还是可以用的,具体的代码我再下面有下载。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里,a通过JS修改iframe的hash值,b里面做一个监听(因为JS只能修改hash,数据是否改变只能由b自己来判断),检测到b的hash值被修改了,得到修改的值,经过处理返回a需要的值,再来修改a的hash值(这个地方要注意,如果a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是无法取得数据的,同样报没有权限的错误,需要a把这个传过来,所以也比较麻烦),同样a里面也要做监听,如果hash变化的话就取得返回的数据,再做相应的处理。

三、这种情形是最经常遇到的,也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一个,也就是另外一个是别人的,人家告诉你你要取得数据就访问某某连接参数是什么样子的,最后返回数据是什么格式的。而你需要做的就是在你的域下新建一个网页,让服务器去别人的网站上取得数据,再返回给你。domain1下的a向同域下的GetData.aspx请求数据,GetData.aspx向domain2下的 ResponseData.aspx发送请求,ResponseData.aspx返回数据给GetData.aspx, GetData.aspx再返回给a,这样就完成了一次数据请求。GetData.aspx在其中充当了代理的作用。具体可以看下我的代码。

四、这个和上个的区别就是请求是使用<script>标签来请求的,这个要求也是两个域都是由你来开发才行。原理就是JS文件注入,在本域内的a 内生成一个JS标签,它的SRC指向请求的另外一个域的某个页面b,b返回数据即可,可以直接返回JS的代码。因为script的src属性是可以跨域的。具体看代码,这个也比较简单。

在父窗口中获取iframe中的元素

格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 
实例:window.frames["ifm"].document.getElementById("btnOk").click();

格式:  

var obj=document.getElementById("iframe的name").contentWindow; 
var ifmObj=obj.document.getElementById("iframe中控件的ID"); 
ifmObj.click(); 
实例: 
var obj=document.getElementById("ifm").contentWindow; 
var ifmObj=obj.document.getElementById("btnOk"); 
ifmObj.click();

 在iframe中获取父窗口的元素

格式:window.parent.document.getElementById("父窗口的元素ID").click(); 
实例:window.parent.document.getElementById("btnOk").click();

jquery

在父窗口中获取iframe中的元素

格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 
实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1
格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2 
实例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

  在iframe中获取父窗口的元素

格式:$('#父窗口中的元素ID', parent.document).click(); 
实例:$('#btnOk', parent.document).click();

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
Javascript动画效果(1)
Oct 11 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 #Javascript
jQuery的ready方法实现原理分析
Oct 26 #Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 #Javascript
BootStrap tab选项卡使用小结
Aug 09 #Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 #Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 #Javascript
BootStrap modal模态弹窗使用小结
Oct 26 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
Destoon实现多表查询示例
2014/08/21 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
JavaScript面向对象编程
2008/03/02 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
管理标语大全
2014/06/24 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android