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

vue3调用 iframe 中的方法

调用 iframe 中的方法可以通过以下步骤实现：

1、获取 iframe 元素的引用

在 Vue3 中，可以使用 ref 属性获取元素的引用。例如，给一个

div 元素添加 ref 属性，可以在组件中通过 ref 属性获取这个 div

元素的引用。

2、获取 iframe 的 window 对象

通过获取 iframe 元素的引用后，可以使用 contentWindow 属性

获取 iframe 的 window 对象。例如，在组件中可以使用以下代码获

取 iframe 的 window 对象：

3、调用 iframe 中的方法

通过获取 iframe 的 window 对象后，就可以调用 iframe 中的

方法了。例如，如果 iframe 中定义了一个名为 myMethod 的方法，

可以使用以下代码调用该方法：

需要注意的是，由于跨域限制，需要通过 postMessage 机制进行

跨域通信。可以在 iframe 中注册一个消息监听器，等待父页面发送

消息，然后在父页面中通过 postMessage 方法发送消息。例如，在

iframe 中可以添加以下代码：

然后在父页面中添加以下代码：