window.postMessage 跨窗口，跨iframe javascript 通信
同源通信
执行它们的页面位于具有相同的协议（http/https），端口（80/443），主机(通常为域名) 时，这两个脚本才能相互通信
大多数情况下，网站就是内部的域名，所以是同源通信，可以相互访问
非同源通信
不同域名，不同窗口，内嵌iframe（可能是外部域名地址） 这种就是非同源通信，
window.postMessage() 方法可以安全地实现跨源通信
来自H5 api，没想到吧，h5还有个这样的方法*.*
语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message 将要发送到其他 window的数据,字符串，数字等 javascript 基本类型以及对象
targetOrigin 通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口
用法
- 发送数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="color" onchange="setMessage(this.value)">
<iframe id ='iframe' src="good.html"></iframe>
<script>
// 发送消息
var domain = 'http://localhost:63342';
var iframe = document.getElementById('iframe').contentWindow;
var setMessage = function (color){
iframe.postMessage(color,domain);
}
window.addEventListener('message',function(event){
if(event.origin !== domain) return
console.log('main receive ' + event.data);
})
</script>
</body>
</html>
- 监听事件，处理消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>good</title>
</head>
<body>
<h1 style="text-align: center;color: black;">看我在便颜色</h1>
</body>
<script>
// 响应消息
window.addEventListener('message',function(event){
if(event.origin !== 'http://localhost:63342') return;
document.body.style.backgroundColor = event.data;
document.body.innerHTML = event.data;
event.source.postMessage('good idea ',event.origin);
},false);
</script>
</html>
本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019/05/16 16:02
window.postMessage 跨窗口，跨iframe javascript 通信的更多相关文章
- WPF 程序如何跨窗口/跨进程设置控件焦点
原文:WPF 程序如何跨窗口/跨进程设置控件焦点 WPF 程序提供了 Focus 方法和 TraversalRequest 来在 WPF 焦点范围内转移焦点.但如果 WPF 窗口中嵌入了其他框架的 U ...
- JavaScript 跨域：window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限 ...
- 跨域通信--Window.postMessage()
一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...
- window.postMessage()实现(iframe嵌套页面)跨域消息传递
window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议 ...
- html5 postMessage解决iframe跨协议跨域通信问题
a.html有个iframe载入b.com/login.html,当login完成时通知a.html页面登录完成并传递UserName 1.a.html 监听消息 window.addEventLis ...
随机推荐
- 阿里云给自己实例扩容-扩展分区和文件系统_Linux系统盘
阿里云买了台服务器ecs 磁盘容量40g 发现已经用了30g了 赶紧扩容 进入 e'cs实例 进入左边菜单 存储与快照 然后选择右边的扩容 然后支付 成功后 进入服务器 df -h 发现怎么还是没变 ...
- Wireshark解密HTTPS数据流
如果是chrome浏览器的数据流 直接配置”SSLKEYLOGFILE“就可以解密了. 实现过程: 1.配置系统环境变量 变量名:SSLKEYLOGFILE 变量值:随意指定一个存储路径,以便chro ...
- RestFramework之注册器、响应器与分页器
一.注册器的说明与使用 在我们编写url时经常会因请求方式不同,而重复编写某条url,而rest_framework中的注册器帮我节省了很多代码 下面介绍一下如何使用 # 利用注册器来实现路由分发 f ...
- Python面向对象Day1
一.面向对象初始 面向过程变成属于流水式 面向对象是一种思想 结构上理解面向对象:两部分 class A: # 类 name = '小明' # 静态属性,静态变量,静态字段,或者属性.变量.字段 de ...
- 【python cookbook】找出序列中出现次数最多的元素
问题 <Python Cookbook>中有这么一个问题,给定一个序列,找出该序列出现次数最多的元素.例如: words = [ 'look', 'into', 'my', 'eyes', ...
- 关于Mock的一些网站
https://github.com/google/googletest/tree/master/googlemock https://blog.csdn.net/hhb200766/article/ ...
- K8S 1.12大特性最快最深度解析：Kubernetes CSI Snapshot（上）
背景 许多存储系统提供了创建存储卷“快照”(snapshot)的能力,以防止数据丢失.快照可以替代传统的备份系统来备份和还原主要数据和关键数据.快照能够快速备份数据(例如,创建GCE PD快照仅需 ...
- 0016SpringBoot实现RESTFUL形式的增删改查
1.列表页面如下 <!DOCTYPE html><!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples ...
- 男上加男团队对 修!咻咻! 团队,云打印 团队的Beta产品测试报告
男上加男团队对 修!咻咻! 团队的Beta产品测试报告 男上加男团队对云打印 团队的Beta产品测试报告 6.2 1.57分补充 睡觉前看终于看到发布的在线版本 重新测试了一下 卡在注册这关 无法收到 ...
- Django REST framework+Vue 打造生鲜电商项目（笔记十一）
(form: http://www.cnblogs.com/derek1184405959/p/8886796.html 有修改) 十四.social_django 集成第三方登录 1.申请应用 进入 ...