页面1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面1</title>
</head>
<body>
页面1
<script type="text/javascript">
const newWin = window.open("http://test1.com", '_blank');
setInterval(()=> {
newWin.postMessage("来自页面1的消息", 'http://test2.com');
},500)
</script>
</body>
</html>
页面2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面2</title>
</head>
<body>
页面2
<script type="text/javascript">
window.onload = function () {
window.addEventListener("message", function (e) {
console.log(e);
// 监听 message 事件
if (e.origin !== "http://test1.com") {
// 验证消息来源地址
return;
}
console.log(e.data);
}, false);
};
</script>
</body>
</html>
hosts配置
127.0.0.1 test1.com
127.0.0.1 test2.com
nginx配置
server {
listen 80;
server_name test1.com;
location / {
root html1;
index index.html index.htm;
}
}
server {
listen 80;
server_name test2.com;
location / {
root html2;
index index.html index.htm;
}
}
测试