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

posted @   ~LemonWater  阅读(300)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示