2024年4月28日发(作者：)

Vue中iframe中的子网页调用父网页的方法

在Vue中，如果在iframe中的子网页中需要调用父网页的方法，可

以通过使用来实现。

下面是一个示例，展示了如何在Vue中使用iframe并调用父网页的

方法：

首先，在Vue组件中添加一个iframe元素，并设置src属性为子网

页的url：

```html

```

在上述示例中，使用了mounted生命周期钩子函数来等待iframe加

载完成并调用sendDataToIframe方法。在sendDataToIframe方法中，使

用iframe的contentWindow属性获取子网页的window对象，并使用

postMessage方法向子网页发送消息。

在父网页中使用message事件监听器来接收子网页发送的消息，并在

receiveMessage方法中处理消息内容。

另外，在组件销毁前，需要使用beforeDestroy生命周期钩子函数将

监听器移除，以防止内存泄漏。