同源通信
执行它们的页面位于具有相同的协议（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