iframe中跨域页面访问parent的方法
背景
如上图所示,系统www.a.com/index.html页面中嵌入一个iframe,iframe中访问不同域的www.b.com/index.html
然后b中有个按钮“保存”,想调用父页面a.com/index.html中的一个js方法saveFavorite()
问题
iframe和父页面如果是同一个域的,那问题很好办,直接parent.saveFavorite()即可。
但问题难在是不同域,不同域是不允许相互访问js代码的。
解决方案
跨域的问题,也有不少的解决方案(参考:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx),这里提供一种比较优雅的
该图要解决的问题说明如下:
在AAA.com域名下的index.htm页面中内嵌了BBB.com域名下的一个页面index.htm,正常情况下iframe内部的index.htm页面是无法访问父页面index.htm中的任何dom对象或者js函数的,因为跨域,但我们经常又需要做一些参数回传的事情怎么办呢?以上的这种实现方式就很好的解决了这个问题;
解决方案的关键优雅之处在于:浏览器虽然会禁止js跨域访问页面中的对象,但对于iframe的层级关系引用并没有做限制,即parent仍然可用;该方案就是利用了2层内嵌iframe、使用第二级iframe中的页面与parent.parent的页面是同域名的关系,从而避免跨域问题实现两个页面间相关数据的传递,本质上就是利用parent.parent实现对父父页面中js的回调!
代码
首先在A.com中定义一个crossDomain.html
<script type="text/javascript">window.onload= function() {moduleId= getParam("moduleId");conditions= getParam("conditions");//这是就是去执行顶层父页面的js方法parent.parent.SaveFavorite(moduleId, "", "&conditions=" +conditions);}functiongetParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return (r[2]); return "";}</script>
然后再B.com/Index.html中,在按钮单击事件中添加如下代码:
//别忘记,在index.html中添加一个隐藏的iframe,当然你也可以通过js动态创建 <iframe id="myfarme" src="#" style="display:none;"></iframe>
btnSaveApp: {tap:function() {win= this.getCdnWin();cdt=win.getValues();conditions= "&conditions=" +Ext.encode(cdt);//这里是核心 document.getElementById('myfarme').src="http://172.16.34.128/hzyapp/crossDomain.html?"+location.search.substring(1)+conditions; }}
这样就可以顺利在跨域的iframe中执行父页面的js方法了,而且可以传递参数,对父页面的相关元素可以任意操作了,对用户来说是非常友好的。
iframe中跨域页面访问parent的方法相关推荐
- 本地主机作服务器解决AJAX跨域请求访问数据的方法
本地主机作服务器解决AJAX跨域请求访问数据的方法 参考文章: (1)本地主机作服务器解决AJAX跨域请求访问数据的方法 (2)https://www.cnblogs.com/QiScript/p/5 ...
- Iframe中跨域进行父子窗口进行通信的四种方法
一.跨域简介 1. 首先简单介绍一下什么是跨域 当我们在浏览器的地址栏中输入一个地址的时候,这个地址通常包含四部分信息内容.这四部分信息包含:①协议.②域名.③端口.④资源位置. 其中前三部分将会决定 ...
- 解决ASP.NET AJAX在frame及iframe中跨域访问的问题
参考网址: http://support.microsoft.com/kb/936993/zh-cn http://weblogs.asp.net/bleroy/archive/2007/01/31/ ...
- iframe父子级页面传值支持跨域访问javascript
今天在使用parent.fn()调用父页面方法时发现并没有成功调用到父级iframe中的方法,后来发现是两个iframe并不在同一域名下,在网上查过后,发现H5中message方法恰好支持,闲话不多说 ...
- html简单父子页面,js 的 iframe 父子页面通信的简单方法
1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindow 可以获取到 子页面 win ...
- iframe跨域自适应高度
关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...
- iframe之父子页面通信
文章目录 iframe之父子同源页面的通信 1.获取 子页面 的 window 对象 ----- `获取iframe节点的contentWindow属性` 2.子 iframe 获取 父页面----- ...
- ifamre 大小随页面变_SEO优化中如何让你的页面访问速度更快
页面访问速度对于SEO优化来说是极为关键的一环.我们试想一下,如果某个访客花了几十秒才能打开你网站的首页,先不说这个访客抱着什么访问目的和什么渠道来的,一般正常的访客大概率都会放弃访问这个页面.由此可 ...
- 域名升级访问中拿笔记好_SEO优化中如何让你的页面访问速度更快
页面访问速度对于SEO优化来说是极为关键的一环.我们试想一下,如果某个访客花了几十秒才能打开你网站的首页,先不说这个访客抱着什么访问目的和什么渠道来的,一般正常的访客大概率都会放弃访问这个页面.由此可 ...
最新文章
- Fiddler简介及安装和HTTPS的解决
- java model 封装_Java封装统一的Result Model案例
- Codeforces Round #368 (Div. 2) C. Pythagorean Triples
- 《Scikit-Learn与TensorFlow机器学习实用指南》第16章 强化学习
- idea 编译spring_《Spring源码解析(二)》构建 Spring5 源码工程,开启研读Spring源码之路...
- altium 网口差分走线长度_差分信号的优缺点及布线要求
- 【初体验】valgrind分析程序性能
- SQLite指南(3) - 5分钟了解熟悉SQLite
- 尚学人工智能课程---2、算法工程师和大数据介绍
- 数据库中查找某个字段
- MTK Android 之MT6577驱动笔记
- 【Unity3D】AR游戏制作 - Sikuto's Farm
- c8051f020 I/O配置小结
- MATLAB | MATLAB不会画图?官方团队来教你
- win10系统装服务器2008蓝屏,升级安装Win10正式版后出现蓝屏怎么办?Win10蓝屏原因分析及解决方法...
- 十七、打码平台的使用
- 简历中的自我评价怎么写?
- 【笔记】wlan - 基础概念(无线、wifi、常见协议、频谱、信道、ap部署、案例)
- Simple Understanding of Skype for Business Databases
- Android Service组件实现后台音乐播放
热门文章
- linux向上翻页_linux学习基础篇——文件管理(一)
- vue mui html不解析,记下Vue中使用Mui.js踩到的坑
- php 隐藏的id,隐藏你的 ID 吧!
- java jconsole_java中jconsole命令的学习
- keil uvision2 c语言调试,keil uvision2
- mysql子查询的方式_分布式系统中一种迭代处理MYSQL子查询的方法
- switch中case后可以是表达式吗_自学C++基础教程【流程控制语句】(switch语句 )...
- 网维大师服务器不运行,网维大师客户机连不上的解决方法
- php企业号自定义菜单,用php实现微信企业号自定义菜单遇到问题,请大神指点!...
- mysql 获取子分类_MySQL 自定义函数获取一个分类的无限级子分类