使用 iframe + postMessage 实现跨域通信
在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。
1、postMessage
postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
语法：
otherWindow.postMessage(message, targetOrigin, [transfer]);- otherWindow：其他窗口的引用，如 iframe的contentWindow、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
- message：将要发送到其他window的数据。
- targetOrigin：指定那些窗口能接收到消息事件，其值可以是字符串 “*” 表示无限制，或者是一个URI。
- transfer：是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送方将不再保留所有权。
postMessage方法被调用时，会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息，该MessageEvent消息有四个属性需要注意：
- type：表示该message的类型
- data：为 postMessage 的第一个参数
- origin：表示调用postMessage方法窗口的源
- source：记录调用postMessage方法的窗口对象
parent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage 跨域通信 主页面</title>
</head>
<body>
<h1>主页面</h1>
<iframe id="child" src="./child.html"></iframe>
<div>
<h2>主页面接收消息区域</h2>
<span id="message"></span>
</div>
</body>
<script>
window.onload = function(){
document.getElementById('child')
.contentWindow.postMessage("主页面消息","http://192.168.23.10:9000/child.html")//父向子传递
}
window.addEventListener('message', function(event){//父获取子传递的消息
document.getElementById('message').innerHTML = "收到"
+ event.origin + "消息：" + event.data;
}, false)
</script>
</html>
child.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage跨域通信 子页面</title>
</head>
<body>
<h2>子页面</h2>
<div>
<h3>接收消息区域</h3>
<span id="message"></span>
</div>
</body>
<script>
window.addEventListener('message',function(event){//子获取父消息
console.log(event);
document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
console.log(top)
top.postMessage("子页面消息收到", 'http://192.168.23.10:9000/parent.html')//父向子消息
}, false);
</script>
</html>
注:不支持file协议
使用 iframe + postMessage 实现跨域通信的更多相关文章
- JavaScript 跨域：window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- 使用window.postMessage实现跨域通信
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...
- 利用HTML5的window.postMessage实现跨域通信
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77 HTML5的window.postMessage简述 postM ...
- 黄聪：利用iframe实现ajax 跨域通信的解决方案（转）
原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...
- html5: postMessage解决跨域通信的问题
效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin ...
- 使用postMessage实现跨域 解决'Failed to execute 'postMessage' on 'DOMWindow''
使用iframe+postMessage解决跨域问题,首先来过一遍其中的原理咯 原理: 发送方使用postMessage方法向接收方推送消息,第一个参数为推送的内容,第二个参数是允许被访问的域名: 接 ...
- html5 postMessage解决iframe跨协议跨域通信问题
a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...
- Javascript使用postMessage对iframe跨域通信
今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...
- iframe跨域通信方案
概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么 ...
随机推荐
- 华为敏捷DevOps实践：产品经理如何开好敏捷回顾会议
大家好,我是华为云DevCloud项目管理服务的产品经理 恒少:) 作为布道师和产品经理,出差各地接触客户是常态,经常和华为云的客户交流.布道.技术沙龙,但是线下交流,覆盖的用户总还是少数.我希望借助 ...
- 查看 tensorflow 是GPU版本 还是CPU版本
在Python环境中输入: import os from tensorflow.python.client import device_lib os.environ["TF_CPP_MIN_ ...
- 利用EFCore 封装Repository（可扩展不同数据的sql操作）
本篇是对EFCore 进行下封装并实现基本的增删改查的同步异步方法及针对不同数据库的批量插入.sql语句直接操作数据库: 一. 先定义基础仓储接口IRepository public interfac ...
- HDU 6299 Balanced Sequence(贪心)
题目:给出N个只有左右括号字符串 ,这N个字符串的排列顺序是任意的 , 问按最优的排序后 , 得到最多匹配的括号个数 分析: 我们很容易的想到 字符串)()()(( , 这样的字符串可以精简为)(( ...
- Python入门(2)
变量补充 一:变量名的名称的大前提:应该能够反映出变量值所记录的状态 具体的,变量名命名规范如下: 1.变量名是由字母.数字.下划线组成 2.不能以数字开头 3.不能使用关键字命名变量名['and', ...
- Knime读取Jason数据
Knime ETL 工具 Jason数据解析到DB 1. 下面例子是一段Jason代码 [{,,},{,,},{,,}] 2. 用文本文件存储上面代码. test_jason.txt 3. 用File ...
- ansible 实战项目之文件操作（二）
一,前言 如果没有安装好的话看我以前的贴子哦!! 上次安装已经确定通了,所以下面步骤应该是完全ok的 特点: (1).轻量级,无需在客户端安装agent,更新时,只需在操作机上进行一次更新即可: (2 ...
- opencv + ffmpeg
opencv2.4.13 与 ffmepg 3.0 一起是可以安装成功的.注意编译ffmpeg时, ./configure --enable-shared 否则会报错. 另外,把以上组合换成ope ...
- java与C语言在字符串结束符上的区别
综述:在C语言中字符串或字符数组最后都会有一个额外的字符‘\0’来表示结束,而在java语言中没有结束符这一概念.具体见下面分析. 1. C 语言 在C语言中字符串和字符数组基本上没有区别,都需要结束 ...
- Android RelativeLayout 属性 转自互联网
// 相对于给定ID控件 android:layout_above 将该控件的底部置于给定ID的控件之上; android:layout_below 将该控件的底部置于给定ID的控件之下; andro ...