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 相关文章推荐
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python实现控制台输入密码的方法
2015/05/29 Python
python版简单工厂模式
2017/10/16 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
11月升旗仪式讲话稿
2014/02/15 职场文书
家长对老师的评语
2014/04/18 职场文书
主题班会演讲稿
2014/05/22 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
亲戚关系证明
2015/06/24 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python