同源通信

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

转载于:https://www.cnblogs.com/telwanggs/p/11289723.html

window.postMessage 跨窗口，跨iframe javascript 通信相关推荐

【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
页面嵌套iframe(window.postMessage()实现跨域通信)
项目中的需求需要外接一个iframe与主页面之间需要通信的情况在iframe 中: 在主页面中: window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚 ...
使用window.postMessage实现跨域通信
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...
H5跨域通信 - window.postMessage
一．简介 window.postMessage is a method for safely enabling cross-origin communication. Normally, script ...
window.postMessage - 前端跨域通信
window.postMessage - 前端跨域通信 window.postMessage() 语法 The dispatched event 安全问题示例注意 HTMLIFrameElemen ...
ifrme嵌入外部页面，在外部页面调用本页面方法,window.postMessage实现跨域通信
项目场景:vue页面开发的系统要继承外部系统页面,并且在外部系统页面调用本系统的方法,这样来看的话肯定会存在跨域的问题,而且直接调用方法的话,也不太安全,后来了解到window.postMessage ...
window.postMessage跨文档通信
window.postMessage 1.浏览器兼容情况:IE8+.chrome.firefox等较新浏览器都至此. 2.使用方法: a.otherWindow.postMessage( messag ...
html5 postMessage解决跨域、跨窗口消息传递
平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的 ...

window.postMessage 跨窗口，跨iframe javascript 通信

同源通信

非同源通信

window.postMessage() 方法可以安全地实现跨源通信

语法

用法

window.postMessage 跨窗口，跨iframe javascript 通信相关推荐

最新文章

热门文章