参考:用HTML5里的window.postMessage在两个网页间传递数据 – WEB骇客 (webhek.com)
环境:
Microsoft Edge 版本 87.0.664.52 (官方内部版本) (64 位)
此浏览器基于 Chromium 开源项目及其他 开源软件。
player页面
<body>
<h1>player页面</h1>
<iframe id="iframe" src="./index.html" frameborder="0"></iframe>
</body>
<script>
//获取页面iframe节点
var iframe = document.getElementById("iframe");
//监听iframe传入事件
window.addEventListener("message", function (e) {
console.log("e==player", e);
});
//监听本页面键盘事件
window.addEventListener("keydown", function (e) {
if (e && (e.keyCode || e.which)) {
var code = e.keyCode || e.which;
//将键盘事件发送到iframe页面
iframe.contentWindow.postMessage({ keyCode: code }, "*");
}
});
</script>
iframe页面
<body>
<h1>iframe页面</h1>
</body>
<script>
//iframe页面,监听player页面传入事件
window.addEventListener("message", function (e) {
console.log("index==", e);
//根据传入事件执行function
var data = {
msg: "index执行function",
code: e.data.keyCode,
};
//将信息传入player页面
window.parent.postMessage(data, "*");
});
</script>
本文地址:https://blog.csdn.net/weixin_40532650/article/details/110533077