我们在开发后台管理系统时可能会经常要跟 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. El表达式的关系运算符

    El表达式的关系运算符: ==  对应  eq !=   对应  ne >    对应  gt <    对应  It

  2. windows7命令帮助大全

    有关某个命令的详细信息,请键入 HELP 命令名ASSOC 显示或修改文件扩展名关联.ATTRIB 显示或更改文件属性.BREAK 设置或清除扩展式 CTRL+C 检查.BCDEDIT 设置启动数据库 ...

  3. 《分布式事务解决之道》沙龙ppt共享

    大型分布式系统往往由很多“微服务”组成,而不同的微服务往往又连接着不同的数据库,在看似常用的功能背后,可能又需要横跨不同的“微服务”和“数据库”才能实现.那么如何才能保证系统事务的一致性呢?这也同时是 ...

  4. Mysql(windows)安装

    h3 { color: rgb(255, 255, 255); background-color: rgb(30,144,255); padding: 3px; margin: 10px 0px } ...

  5. Jquery更改table中的内容（一）

    css部分: .tab{ border:solid 1px #00aaee; text-align: left; margin:20px;}.tab tr{ border-top: solid 1px ...

  6. iOS - ViewController的生命周期

    iOS SDK中提供很多原生的ViewController,大大提高了我们的开发效率:那么下面我们就根据开发中我们常用的ViewController谈一谈它的生命周期: (一)按照结构和用法可以对iO ...

  7. Android中使用Notification实现普通通知栏（Notification示例一）

    Notification是在你的应用常规界面之外展示的消息.当app让系统发送一个消息的时候,消息首先以图表的形式显示在通知栏.要查看消息的详情需要进入通知抽屉(notificationdrawer) ...

  8. jsonp跨域请求

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Unity3D安卓出包报错

    今天又遇到了在安卓出包时,直接报错了两个错误,报错信息分别如下: Installation failed with the following output: pkg: /data/local/tmp ...

  10. [MySQL Reference Manual] 23 Performance Schema结构

    23 MySQL Performance Schema 23 MySQL Performance Schema 23.1 性能框架快速启动 23.2 性能框架配置 23.2.1 性能框架编译时配置 2 ...