iframe 和父级页面通信
父页面
<html>
<body>
<p>我是父页面</p>
<iframe src="./sub.html" frameborder="0" width="100%" height="80%"></iframe>
</body>
</html>
子页面
<html>
<body>
<p>我是子页面</p>
</body>
</html>
父页面给子页面发送消息
let message = {
msg: '父页面的消息',
date: Date.now(),
}
document.querySelector('p').addEventListener('click', () => {
// 第二个参数请传递消息接收方的域名 如 'http://www.baidu.com'
document.querySelector('iframe').contentWindow.postMessage(message, '*');
})
子页面给父页面发送消息
let message = {
msg: '子页面的消息',
date: Date.now(),
}
document.querySelector('p').addEventListener('click', () => {
// 第二个参数请传递消息接收方的域名 如 'http://www.baidu.com'
window.parent.postMessage(message, '*');
})
父/子页面接收消息方法一致
window.addEventListener('message', function(e) {
// 获取消息内容 data
let { data } = e;
data = JSON.parse(data);
console.log('收到父页面消息', e);
});
原文链接：https://blog.csdn.net/yaxuan88521/article/details/126721305
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」