Vue中调用iframe里的方法

要在 Vue 中调用 iframe 中的方法，你需要获取到 iframe 的 DOM 对象，然后通过 `contentWindow` 属性访问 iframe 内部的 window 对象，最后通过 window 对象访问相应的方法。

以下是一个示例代码：

<template>
  <div>
    <iframe ref="myFrame" src="./my-iframe.html"></iframe>
    <button @click="callIframeMethod">调用 iframe 方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callIframeMethod() {
      const iframe = this.$refs.myFrame;
      const iframeWindow = iframe.contentWindow;
      iframeWindow.myMethod();
    },
  },
};
</script>

在上述代码中，我们首先通过 `ref` 属性将 iframe 组件引用为 `myFrame`，然后在 `callIframeMethod` 方法中获取到 iframe 对象和内部的 window 对象，最后通过 `iframeWindow.myMethod()` 调用了 iframe 中的 `myMethod` 方法。

相关问题

vue调用iframe页面方法

首先，你可以使用 vue-router 将 iframe 页面添加到 vue 中，然后使用 vue 中的 window 对象来获取 iframe 的 window 对象，从而访问 iframe 页面的方法。

vue 调用iframe的加载方法

要在 Vue 中调用 iframe 的加载方法，可以使用以下代码：

<template>
  <div>
    <iframe ref="myIframe" src="https://www.example.com"></iframe>
    <button @click="loadIframe">Load Iframe</button>
  </div>
</template>

<script>
export default {
  methods: {
    loadIframe() {
      this.$refs.myIframe.contentWindow.location.reload(true);
    }
  }
};
</script>

在这个例子中，我们在模板中定义了一个 iframe，并给它设置了一个引用（ref）。然后，我们在按钮的点击事件中调用了 `loadIframe` 方法，该方法使用 `contentWindow` 属性获取 iframe 的窗口对象，并调用 `location.reload` 方法重新加载 iframe。

注意，由于浏览器的安全策略，只有在 iframe 的源与页面的源相同，才能调用它的加载方法。如果源不同，将会出现跨域错误。