背景

如上图所示,系统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的方法相关推荐

  1. 本地主机作服务器解决AJAX跨域请求访问数据的方法

    本地主机作服务器解决AJAX跨域请求访问数据的方法 参考文章: (1)本地主机作服务器解决AJAX跨域请求访问数据的方法 (2)https://www.cnblogs.com/QiScript/p/5 ...

  2. Iframe中跨域进行父子窗口进行通信的四种方法

    一.跨域简介 1. 首先简单介绍一下什么是跨域 当我们在浏览器的地址栏中输入一个地址的时候,这个地址通常包含四部分信息内容.这四部分信息包含:①协议.②域名.③端口.④资源位置. 其中前三部分将会决定 ...

  3. 解决ASP.NET AJAX在frame及iframe中跨域访问的问题

    参考网址: http://support.microsoft.com/kb/936993/zh-cn http://weblogs.asp.net/bleroy/archive/2007/01/31/ ...

  4. iframe父子级页面传值支持跨域访问javascript

    今天在使用parent.fn()调用父页面方法时发现并没有成功调用到父级iframe中的方法,后来发现是两个iframe并不在同一域名下,在网上查过后,发现H5中message方法恰好支持,闲话不多说 ...

  5. html简单父子页面,js 的 iframe 父子页面通信的简单方法

    1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindow 可以获取到 子页面 win ...

  6. iframe跨域自适应高度

    关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...

  7. iframe之父子页面通信

    文章目录 iframe之父子同源页面的通信 1.获取 子页面 的 window 对象 ----- `获取iframe节点的contentWindow属性` 2.子 iframe 获取 父页面----- ...

  8. ifamre 大小随页面变_SEO优化中如何让你的页面访问速度更快

    页面访问速度对于SEO优化来说是极为关键的一环.我们试想一下,如果某个访客花了几十秒才能打开你网站的首页,先不说这个访客抱着什么访问目的和什么渠道来的,一般正常的访客大概率都会放弃访问这个页面.由此可 ...

  9. 域名升级访问中拿笔记好_SEO优化中如何让你的页面访问速度更快

    页面访问速度对于SEO优化来说是极为关键的一环.我们试想一下,如果某个访客花了几十秒才能打开你网站的首页,先不说这个访客抱着什么访问目的和什么渠道来的,一般正常的访客大概率都会放弃访问这个页面.由此可 ...

最新文章

  1. Fiddler简介及安装和HTTPS的解决
  2. java model 封装_Java封装统一的Result Model案例
  3. Codeforces Round #368 (Div. 2) C. Pythagorean Triples
  4. 《Scikit-Learn与TensorFlow机器学习实用指南》第16章 强化学习
  5. idea 编译spring_《Spring源码解析(二)》构建 Spring5 源码工程,开启研读Spring源码之路...
  6. altium 网口差分走线长度_差分信号的优缺点及布线要求
  7. 【初体验】valgrind分析程序性能
  8. SQLite指南(3) - 5分钟了解熟悉SQLite
  9. 尚学人工智能课程---2、算法工程师和大数据介绍
  10. 数据库中查找某个字段
  11. MTK Android 之MT6577驱动笔记
  12. 【Unity3D】AR游戏制作 - Sikuto's Farm
  13. c8051f020 I/O配置小结
  14. MATLAB | MATLAB不会画图?官方团队来教你
  15. win10系统装服务器2008蓝屏,升级安装Win10正式版后出现蓝屏怎么办?Win10蓝屏原因分析及解决方法...
  16. 十七、打码平台的使用
  17. 简历中的自我评价怎么写?
  18. 【笔记】wlan - 基础概念(无线、wifi、常见协议、频谱、信道、ap部署、案例)
  19. Simple Understanding of Skype for Business Databases
  20. Android Service组件实现后台音乐播放

热门文章

  1. linux向上翻页_linux学习基础篇——文件管理(一)
  2. vue mui html不解析,记下Vue中使用Mui.js踩到的坑
  3. php 隐藏的id,隐藏你的 ID 吧!
  4. java jconsole_java中jconsole命令的学习
  5. keil uvision2 c语言调试,keil uvision2
  6. mysql子查询的方式_分布式系统中一种迭代处理MYSQL子查询的方法
  7. switch中case后可以是表达式吗_自学C++基础教程【流程控制语句】(switch语句 )...
  8. 网维大师服务器不运行,网维大师客户机连不上的解决方法
  9. php企业号自定义菜单,用php实现微信企业号自定义菜单遇到问题,请大神指点!...
  10. mysql 获取子分类_MySQL 自定义函数获取一个分类的无限级子分类