在非跨域的情况下，iframe中的子父页面可以很方便的通讯，但是在跨域的情况下，只能通过window.postMessage()方法来向其他页面发送信息，其他页面要通过window.addEventListener()监听事件来接收信息；

#跨域发送信息

#window.postMessage()语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

  • otherWindow

    其他窗口的一个引用，写的是你要通信的window对象。

    例如：在iframe中向父窗口传递数据时，可以写成window.parent.postMessage()，window.parent表示父窗口。

  • message

    需要传递的数据，字符串或者对象都可以。

  • targetOrigin

    表示目标窗口的源，协议+域名+端口号，如果设置为“*”，则表示可以传递给任意窗口。在发送消息的时候，如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。例如：

    window.parent.postMessage('hello world','http://xxx.com:8080/index.html')

    只有父窗口是http://xxx.com:8080时才会接受到传递的消息。

  • [transfer]

    可选参数。是一串和message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。我们一般很少用到。

#跨域接收信息

需要监听的事件名为"message"

window.addEventListener('message', function (e) {

    console.log(e.data)  //e.data为传递过来的数据

    console.log(e.origin)  //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）

    console.log(e.source)  //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信

})

#示例Demo

示例功能：跨域情况下，子父页面互发信息并接收。

  • 父页面代码：
<body>

	<button onClick="sendInfo()">向子窗口发送消息</button>

	<iframe id="sonIframe" src="http://192.168.2.235/son.html"></iframe>

    <script type="text/javascript">

        var info = {

            message: "Hello Son!"

        };

		//发送跨域信息

		function sendInfo(){

			var sonIframe= document.getElementById("sonIframe");

			sonIframe.contentWindow.postMessage(info, '*');

		}

		//接收跨域信息

		window.addEventListener('message', function(e){

				alert(e.data.message);

		}, false);

    </script>

</body>
  • 子页面代码
<body>

	<button onClick="sendInfo()">向父窗口发送消息</button>

    <script type="text/javascript">

        var info = {

            message: "Hello Parent!"

        };

		//发送跨域信息

		function sendInfo(){

			window.parent.postMessage(info, '*');

		}

		//接收跨域信息

		window.addEventListener('message', function(e){

				alert(e.data.message);

		}, false);

    </script>

</body>

iframe中子父页面跨域通讯的更多相关文章

  1. iframe内嵌页面——跨域通讯

      <template> <div class="act-form"> <iframe :src="src" ref=" ...

  2. iframe跨域通讯

    工作中遇到一个问题,IFRAME嵌套了一个外部页面用于统计 统计的JS由我们提供,并且需要提供热点图 一开始就碰到的问题就是 不知道页面高度 需要子页面传回页面高度用于将IFRAME拉升到合适高度 当 ...

  3. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  4. html5跨域通讯之postMessage的用法

    转自:http://www.cnblogs.com/wshiqtb/p/3171199.html postMessagePortal.html 页面代码 <!DOCTYPE html> & ...

  5. XDomainRequest IE8&amp;IE9 cors 跨域通讯的处理方法

       版权声明:避免百度一下通片同一篇文章,未经博主允许不得转载.本博客作为笔记使用,正确性请自行验证. https://blog.csdn.net/u014071104/article/detail ...

  6. iframe调用父页面js函数 方法 元素

    在一个页面中添加iframe,但是有时需要与父页面进行通信,传递参数. 网上总结有以下方法: 一.iframe标签中   src属性传参 <iframe src="test.jsp?i ...

  7. window.postMessage()实现(iframe嵌套页面)跨域消息传递

    window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议 ...

  8. iframe嵌套页面 跨域

    父级调用iframe方法: document.getElementById("iframe").contentWindow.func(data1,data2...) 子级 ifra ...

  9. iframe中涉及父子页面跨域问题

    什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http:/ ...

随机推荐

  1. linux入门系列9--用户管理及文件权限控制

    ​ 前面文章分享了Linux下常用命令以及Shell编程相关知识,本节继续学习Linux用户管理及文件权限控制. ​ Linux是多用户多任务操作系统,具有很好的稳定性和安全性.既然是多用户,那就意味 ...

  2. JAVA环境配置（Windows10）

    Java开发环境配置 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:https://www.oracle.com/technetwork/java/javase/downloads/ ...

  3. webpack chunkFilename 非入口文件的命名规则 [转]

    官网的文档只理解了filename是主入口的文件名,chunkFilename是非主入口的文件名 filename应该比较好理解,就是对应于entry里面生成出来的文件名.比如: { entry: { ...

  4. bootstrap 图片类 和 按钮类 部分

    bootstrap框架,来自 Twitter,基于 html ,css ,js.简介灵活. 首先引入  bootstrap.js   bootstrap.css  及 jquery.js  这里不考虑 ...

  5. vs 搭配 Linux 开发

    这是一篇翻译,为什么突然想翻译文章了呢,因为很多大佬们都说英语对程序员还是挺重要的,毕竟互联网的最新技术基本都在歪果仁那边,如果英语不好,不会看国外的文档的话,将会错失接触第一手资料的机会,失去很多先 ...

  6. 一文带你了解 C# DLR 的世界

    一文带你了解 C# DLR 的世界 在很久之前,我写了一片文章dynamic结合匿名类型 匿名对象传参,里面我以为DLR内部是用反射实现的.因为那时候是心中想当然的认为只有反射能够在运行时解析对象的成 ...

  7. Apache Tomcat文件包含漏洞紧急修复

    Tomcat 漏洞 tomcat有漏洞, 需要升级到9.0.31 https://cert.360.cn/warning/detail?id=849be16c6d2dd909ff56eee7e26ae ...

  8. linux下的cron定时任务知识梳理

    1 cron定时任务 1.1 cron介绍 为什么需要cron定时任务? 1)cron服务在安装完Linux系统后就默认就存在,主要用来定期执行命令或定期执行指定的应用程序; 2)cron服务默认情况 ...

  9. zabbix-agent TIME_WAIT 过多（转）

    一.系统环境 操作系统: Centos 6.4 64bit zabbix-agent 版本: Zabbix agent v2.2.7 (revision 50148) (24 October 2014 ...

  10. Date() 按条件打印当前日期的月份和周

    条件:打印 月份-第几周 若本月前七天不在全在第一周则这一周计入到上月第五周. 分析: 1.条件判断分别处理前七天和大于等于七天的数据: 2.当前月的7号是关键,如果在周天就不需要放到上月,如果不在周 ...