非同源信息共享 postMessage-CFANZ编程社区

otherWindow.postMessage(data, targetOrigin, [transfer]);
参数说明

参数	说明
otherWindow	其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
data	将要发送到其他 window的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化
targetOrigin	指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"；
transfer	可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

实例1 ---->点击跳转打开新页面方式
1.点击跳转打开新页面方式
2.当前页面 http://a.com
3.跳转后的页面 http://b.com

当前页面(父级)处理方式(发出/接收数据)

http://a.com页面

const targetUrl = "http://b.com"
const tartgetWind = window.open(targetUrl)
const data = {...}

const postMessageTimer = setInterval(()=> {
	tartgetWind.postMessage(data,targetUrl)
})


window.addEventListener("message",(e) => {
	//e.data 接收到的数据 子级传递过来的数据
	//e.origin 父级域名(port)
	if( e.data.hasGetData){
		clearInterval(postMessageTimer)
		postMessageTimer = null
	}
})

目标页面(子级) 接收发出数据
http://b.com 页面

window.addEventListener("message",(e) => {
	//e.data 接收到的数据 父级传递过来的数据
	//e.origin 父级域名(port)
	if(e.origin != "http://a.com") return
	const _data = e.data
	console.log(_data,e.origin,"--->父级传递过来的数据")
	
	//接收到信息告知父级;
	const hasGetData = true,
	e.source.postMessage(hasGetData,e.origin)
})

实例2 ---->iframe嵌套页面方式
1.http://a.com/a.html 主页面
2.http://b.com/b-iframepage.html 嵌套页面

a.html (父级)处理方式(发出/接收数据)

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage 跨域 a页面</title>
</head>
<body>
    <iframe id="child" src="http://b.com/b-iframepage..html"></iframe>
    <div>
        <span>主页面</span>
    </div>
</body> 
<script>

//注意：一定是页面加载完成后在发送消息，否则会因为 iframe 未加载完成报错。
    window.onload = function(){
    	var targetDom = document.getElementById('child')
     	targetDom.contentWindow.postMessage("主页面消息","http://b.com/iframepage.html")
    }
</script>
</html>

ib-iframepage…html 目标页面(子级) 接收发出数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>frame+postMessage 跨域 b.iframe页面</title>
</head>
<body>
    <div>
        <span id="iframeDom"></span>
    </div>
</body>

<script>
    window.addEventListener('message',function(event){
        console.log(event);
        document.getElementById('iframeDom').innerHTML = "收到" + event.origin + "消息：" + event.data;}, false);
</script>
</html>

注: 如果接收不到,父级发出的时候也可配合使用 setInterval