1，跨域方式
iframe
+postMessage+messagea页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
</head>
<body>
<p>this is parent window</p>
<input type="text" id="parentMsg">
<button id="sendParentMsg">发送信息到iframe</button>
<div class="contents">
<p>这里会展示收到的信息</p>
</div>
<iframe src="b.html" frameborder="2" id="childIframe" height="500" width="800"></iframe>
<script>
var origin, win;
// 为父页面绑定message事件，接受来自iframe发送的消息
window.addEventListener('message', event => {
document.querySelector('.contents').innerHTML += `<p> 收到信息：${event.data}, 来自于${event.origin}</p>`;
});
// win可以是iframe的引用，也可以是通过通过父页面打开的子页面的window引用，比如子页面是通过window.open打开的，那么win可以是win = window.open(url, '_blank'),这样便可以实现两个tab页之间的通信
win = document.querySelector('#childIframe').contentWindow;
document.querySelector('#sendParentMsg').addEventListener('click', () => {
var parentMsg = document.querySelector('#parentMsg').value.trim();
if (parentMsg) {
win.postMessage(parentMsg, '*');
document.querySelector('#parentMsg').value = '';
}
})
</script>
</body>
</html>
iframe页面代码
b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>child</title>
</head>
<body>
<p>this is iframe page</p>
<label for="subpageInput"> 请输入信息</label>
<input type="text" id="subpageInput">
<button class="sendSubpage">发送信息到父页面</button>
<div class="contents">
</div>
<script>
var parentWin, parentOrigin;
// 监听来自父页面的消息
window.addEventListener('message', event => {
parentOrigin = event.origin; // 获取发送方页面的origin，通过判断此属性来识别发送方的身份
parentWin = event.source; // 获取发送发window对象的引用，可以通过这个对象调用postMessage方法实现父子页面互相通信。
document.querySelector('.contents').innerHTML += `<p>iframe 收到信息：${event.data}, 来自于${event.origin}</p>`;
});
document.querySelector('.sendSubpage').addEventListener('click', () => {
var subMessage = document.querySelector('#subpageInput').value.trim();
if (subMessage) {
// submessage为要发送的信息，'*'为指定某个域接受信息
parentWin.postMessage(subMessage, '*')
document.querySelector('#subpageInput').value = '';
}
})
</script>
</body>
</html>