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

vue调用iframe中的vue方法

在开发过程中，我们可能需要在主页面中嵌入一个iframe页面，

而这个iframe页面使用了Vue框架进行开发。那么在主页面中如何

调用iframe中的Vue方法呢？

解决方法如下：

1.在iframe页面中，我们需要将Vue实例挂载在window对象下，

使其成为全局变量，如下所示：

```javascript

mounted() {

tance = this;

}

```

2.在主页面中，通过iframe元素的contentWindow属性获取到

iframe的window对象，然后可以通过此对象获取到iframe中的Vue

实例，从而调用其方法，如下所示：

```javascript

// 获取iframe元素

const iframe = elector('iframe')

// 获取iframe的window对象

const iframeWindow = tWindow;

// 调用iframe中的Vue方法

Name();

- 1 -

```

需要注意的是，由于跨域问题，我们只能在同源的情况下才能访

问到iframe中的内容。如果不是同源，我们需要通过设置

属性或者使用postMessage API来解决跨域问题。

- 2 -