iframe嵌套网页使用window.postMessage()跨域通信

1. 什么是跨域

• 跨域，指的是浏览器不能执行其他网站的脚本。
• 它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
• 所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域。
• 举几个例子：

地址1	地址2	协议	域名	端口	是否跨域
http://web.a.com/index.html	http://web.a.com/page.html	相同	相同	相同	否
http://web.a.com/index.html	http://web.b.com/page.html	相同	不同	相同	是
http://web.a.com:8080/index	http://web.a.com:8081/index	相同	相同	不同	是
http: //web.a.com/index.html	https: //web.a.com/page.html	不同	相同	相同	是

2. postMessage()语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

• otherWindow
  其他窗口的一个引用，写的是你要通信的window对象。
  例如在iframe中向父窗口传递数据时，可以写成window.parent.postMessage()，window.parent表示父窗口。
• message
  需要传递的数据，字符串或者对象都可以，对象需要序列化（JSON.parse()），详细用法请转到：https://blog.youkuaiyun.com/github_38336924/article/details/96423264
• targetOrigin
  表示目标窗口的源，协议+域名+端口号，如果设置为“ * ”，则表示可以传递给任意窗口。

// 可以传递给任意窗口
window.parent.postMessage('hello world','*');

在发送消息的时候，如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。

// 只有父窗口为 http://web.a.com/index.html 接收到消息 
window.parent.postMessage('hello world','http://web.a.com/index.html');

• 发送消息

window.parent.postMessage('hello world','http://web.a.com/index.html');

• 接收消息

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event.data)  //event.data为传递过来的数据
    console.log(event.origin)  //event.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
    console.log(event.source)  //event.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
}

3. demo

3.1 子窗口 一> 父窗口传递信息

• 子窗口 code

//子页面向父级页面传递信息
window.onload = function() {
    window.parent.postMessage({  //与父级页面通讯方法
    type: "onload",              //父级接收的信息 
    data："do something"         //如果传递的信息为object（数组或者json格式）需要转换成字符串
  }, '*');
}
 
 
//子页面接收信息 与父页面接收信息相同
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event);
}

• 父窗口 code

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event);
}

3.2 父窗口 一> 子窗口传递信息

• 父窗口 code

// 父页面向子页面传递信息 contentWindow.postMessage方法与window.postMessage相似
var iframe=document.getElementById("iframe");
iframe.contentWindow.postMessage({
    type: "set",
    content："hello world"
}, "*");

//父页面接收信息 与子页面接收信息相同
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event);
}

• 子窗口 code

// 子页面接收信息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event);
}