window.postMessage实现iframe跨源通信

Bright2017

于 2023-04-04 17:28:28 发布

阅读量241

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Bright2017/article/details/129958161

文章详细介绍了如何在JavaScript中使用window.postMessage方法在子页面和父页面间传递数据，强调了在页面销毁前移除事件监听器以防止资源泄露的重要性，并给出了具体的代码示例，包括在Vue.js组件中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

了解 window.postMessage 方法

子页面

window.parent.postMessage({ data:"xxx"},'*');

父页面

// 页面销毁前，务必去除监听器，否则会造成资源泄露！
beforeDestory () {
	window.removeEventListener('message', this.listenerFun)
}

mounted() {
	window.addEventListener('message',this.listenerFun)
}

methods: {
  listenerFun (e) {
	console.log(e.data);
    // 业务处理逻辑 todo
  }
}