背景

如上图所示,系统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);
}
function getParam(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,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...

  2. iframe 跨域自适应 纯css解决方法

    <style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100% ...

  3. iframe之父子页面通信

    iframe之父子页面通信 1.获取 子页面 的 window 对象  在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...

  4. iframe与主框架跨域相互访问方法【转】

    转自:http://blog.csdn.net/fdipzone/article/details/17619673 1.同域相互访问 假设A.html 与 b.html domain都是localho ...

  5. iframe与主框架跨域相互访问方法

    iframe 与主框架相互访问方法  http://blog.csdn.net/fdipzone/article/details/17619673/ 1.同域相互访问 假设A.html 与 b.htm ...

  6. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

  7. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. js iframe跨域访问

    1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...

随机推荐

  1. StringBoot集成Rabbit Redis和ack机制双重保险,保障消息一定能够正确的消费

    转: StringBoot集成Rabbit,根据业务返回ACK 原文链接 : http://www.jianshu.com/p/baed9ec92410 为了维护消息的有效性,当消费消息时候处理失败时 ...

  2. 转:纯CSS实现“鼠标移过显示层”效果

    利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...

  3. Tomcat7环境下面MySQL 56/Oracle数据库连接池的配置

    环境: Tomcat7 MySQL56 mysql-connector-java-3.1.10-bin.jar 步骤: 1. 配置context.xml 此文件位于~\tomcat7\conf目录下面 ...

  4. Install OpenCV3.0 on Eclipse

     Neste artigo veremos como usar o OpenCV com Eclipse. Usaremos as versões mais recentes:OpenCV 3.0 ...

  5. JasperReport学习札记6-JRXML的标签

    原文源于:http://langhua9527.iteye.com/blog/402317 JasperReport学习笔记6-JRXML的标签1.<jasperReport>根元素包括很 ...

  6. 【Unity】6.4 Transform--移动、旋转和缩放游戏对象

    分类:Unity.C#.VS2015 创建日期:2016-04-20 一.简介 Unity引擎提供了丰富的组件和类库,为游戏开发提供了非常大的便利,熟练掌握和使用这些API,对于游戏开发的效率提高很重 ...

  7. 【iOS XMPP】使用XMPPFramewok(三):好友状态

    转自:http://www.cnblogs.com/dyingbleed/archive/2013/05/13/3071544.html 好友状态 获取好友状态,通过实现 - (void)xmppSt ...

  8. RVM切换ruby版本号

    RVM是Ruby Version Manager的缩写,是一个命令行工具,它能够让你轻松地安装,管理和使用多个版本号的Ruby.不同的rails项目使用等ruby和rails版本号不一样的时候.能够使 ...

  9. Flink connectedstreams

    https://stackoverflow.com/questions/40613684/apache-flink-scope-of-valuestate-in-connectedstreams ht ...

  10. .NET MVC结构框架下的微信扫码支付模式二 API接口开发测试

    直接上干货 ,我们的宗旨就是为人民服务.授人以鱼不如授人以渔.不吹毛求疵.不浮夸.不虚伪.不忽悠.一切都是为了社会共同进步,繁荣昌盛,小程序猿.大程序猿.老程序猿还是嫩程序猿,希望这个社会不要太急功近 ...