iframe父子页面通信相互调用传递参数多个postMessage-编程知识

iframe父子页面通信相互调用传递参数多个postMessage

效果

在这里插入图片描述

如何运行

在这里插入图片描述

父页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>父亲-页面</h1><iframe src="./b.html" width="500" height="300" id="topNav"></iframe><script>function parentEvent(a) {alert("父亲被儿子调用"+JSON.stringify(a));}// 监听消息window.addEventListener("message", receiveMessage, false);function receiveMessage(event) {debuggerif (event.data.event_id === "my_cors_message") {console.log('event.data',event.data);parentEvent(event.data); // 触发父页面事件}}// 参考https://cloud.tencent.com/developer/ask/sof/101133167// 原文链接：https://blog.csdn.net/mkmmkkghhhhhhhh/article/details/131370510</script>
</body></html>

子页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>我是儿子页面--kkk</h2><button onclick="triggerParentEvent()">方法1：调用父亲页面</button><script>function triggerParentEvent() {debuggerconst parentWindow = window.parent;parentWindow.postMessage({event_id: 'my_cors_message',data: { // 这里可以传递多个参数给父页面v1: 'value1',v2: 'value2'}},['http://localhost:80','http://localhost:89'] // 这里填入域名，能指定给哪个网址发送信息); // 发送消息}</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/190347.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！