我们在开发后台管理系统时可能会经常要跟 iframe 打交道，因为现在大部分后台管理系统都是页面内嵌iframe，所以有时候两者之间就难免要互相通信,但浏览器为了安全的原因，所以就禁止了不同域的访问，所以现在我们就用一种简单通俗的办法解决这个问题：

a页面和c页面都是 www.aaa.com域名下的，b页面是www.bbb.com域名下的，a页面内嵌的iframe是b页面，如果现在b页面想调用a页面的方法，那么就需要在b页面动态创建一个iframe而这个iframe就是c页面，c页面需要和a页面在同一个域名下，如下图所示：

a.html页面代码

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>www.aaa.com页面下a.html</title>

<script type="text/javascript">

function alerFun(){

    alert('我是www.aaa.com域名下 a页面的方法');

}

</script>

</head>

<body>

<div>www.aaa.con-------a.html</div><br>

<iframe src="http://127.0.0.1/iframe/kuayu/b.html" name="myframe" width="500" height="100"></iframe>

</body>

</html>

b.html页面代码

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>www.bbb.com域名下b页面</title>

<script type="text/javascript">

function creatFrame(){

  if(typeof(oFrame)=='undefined'){

      oFrame = document.createElement('iframe');

      oFrame.src = 'http://localhost/iframe/kuayu/c.html';

      oFrame.style.display = 'none';

      document.body.appendChild(oFrame);

  }else{

      oFrame.src = 'http://localhost/iframe/kuayu/c.html?' + Math.random();

  }

}

</script>

</head>

<body>

<div>www.bbb.con-------b.html</div>

<div><input type="button" value="调用a页面的方法" onclick="creatFrame()"></div>

</body>

</html>

c.html页面代码

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>www.aaa.com页面下c.html</title>

</head>

<body>

<script type="text/javascript">

    parent.parent.alerFun();

</script>

</body>

</html>

c页面其实就是一个自执行函数，当创建这个页面时就会自动执行同域下a页面里的函数，所以我们就可以在b页面通过中间层C页面来调用父框架a页面的方法了~

效果图如下：

同理如果想让a页面调用b页面的方法也是如此，剩下的就自己动手试试吧~

iframe 跨域相互操作的更多相关文章

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

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

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

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

  3. Javascript使用postMessage对iframe跨域通信

    今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...

  4. iFrame跨域的方式

    4种通过iframe跨域与其他页面通信的方式 不同域下的iframe不能进行操作. 1.location.hash: 在url中,http://www.baidu.com#helloword的#hel ...

  5. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

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

  6. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

  7. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  8. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  9. iframe跨域通信实战

    "长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...

随机推荐

  1. Windows编译Nginx源码

    Windows下的Nginx战役,人不作就不会死!就像是拿着麦当劳的优惠券去买肯德基一样,别扭啊 Nginx是一款轻量级的Web 服务器.反向代理服务器.邮件服务器等等集一大串荣誉于一身的大牌人物!他 ...

  2. 谈一谈前端多容器（多webview平台）处理方案

    文中是我个人的一些开发经验,希望对各位有用,也希望各位多多支持讨论,指出文中不足以及提出您的一些建议. 双容器 得益于近几年移动端的发展,前端早已今非昔比,从大型框架来说angularJS.react ...

  3. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  4. dyld 加载 Mach-O

    ➠更多技术干货请戳:听云博客 前言 最近看 ObjC的runtime 是怎么实现 +load 钩子函数的实现.进而引申分析了 dyld 处理 Mach-O 的这部分机制. 1.简单分析 Mach-O ...

  5. Android 手机卫士--获取联系人信息并显示与回显

    前面的文章已经实现相关的布局,本文接着进行相关的功能实现 本文地址:http://www.cnblogs.com/wuyudong/p/5951794.html,转载请注明出处. 读取系统联系人 当点 ...

  6. 【代码笔记】iOS-自定义开关

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "ToggleView.h&qu ...

  7. Highchart插件简介和引入方式

    一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highchart ...

  8. Java 性能分析工具 , 第 3 部分: Java Mission Control

    引言 本文为 Java 性能分析工具系列文章第三篇,这里将介绍如何使用 Java 任务控制器 Java Mission Control 深入分析 Java 应用程序的性能,为程序开发人员在使用 Jav ...

  9. 5、项目间的沟通协调 - PMO项目管理办公室

    沟通是人类所具备的优良而有一定技巧的一种方式.但是,沟通也是PMO项目管理办公室中所有项目组必须建立起来的能力,也是PMO项目管理办公室日常所需要进行的一项工作内容. 一.项目间的沟通: PMO项目管 ...

  10. ddd 聚合根 之 聚合与不聚合 设计

    聚合 不聚合 订单和订单明细 论坛主贴与贴子回复 订单和收货地址(vo)