父子iframe通信可通过postMessage方法实现,这里没做过多探究,纯粹好玩。
1. 启动vscode分别打开两个页面:main.html和iframepage.html
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage 跨域通信 主页面</title>
</head>
<body>
<h1>主页面</h1>
<div>
<h2>主页面接收消息区域</h2>
<span id="message"></span>
</div>
<iframe id="child" src="http://127.0.0.1:5501/iframepage.html"></iframe>
</body>
<script>
window.onload = function () {
document.getElementById('child')
.contentWindow.postMessage("主页面消息", "http://127.0.0.1:5501/iframepage.html")
}
window.addEventListener('message', function (event) {
document.getElementById('message').innerHTML = "收到"
+ event.origin + "消息:" + event.data;
}, false);
</script>
</html>
iframepage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage跨域通信 子页面</title>
</head>
<body>
<h2>子页面</h2>
<div>
<h3>接收消息区域</h3>
<span id="message"></span>
</div>
</body>
<script>
window.addEventListener('message', function (event) {
console.log(event);
document.getElementById('message').innerHTML = "收到"
+ event.origin + "消息:" + event.data;
}, false);
top.postMessage("子页面消息收到", 'http://127.0.0.1:5500/main.html')
</script>
</html>
2. 安装live server,启动live server