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 的源与页面的源相同，才能调用它的加载方法。如果源不同，将会出现跨域错误。

相关问题

vue调用iframe

可以使用 Vue 的 `iframe` 组件来调用 `iframe`。首先需要在组件中引入 `iframe` 组件：

<template>
  <div>
    <iframe :src="url"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com'
    }
  }
}
</script>

在上面的代码中，我们使用了 `:src` 属性来指定 `iframe` 的 URL。你可以将其替换为你想要加载的网址。

vue iframe 加载完成回调方法

在 Vue 中，可以使用 `iframe` 元素的 `load` 事件来监听其加载完成的回调方法。具体做法如下：

1. 在模板中添加 `iframe` 元素，并绑定 `load` 事件：

<iframe :src="url" @load="iframeLoaded"></iframe>

2. 在 Vue 实例中定义 `iframeLoaded` 方法：

export default {
  data() {
    return {
      url: 'https://example.com'
    }
  },
  methods: {
    iframeLoaded() {
      console.log('iframe loaded');
      // 在这里可以执行 iframe 加载完成后的操作
    }
  }
}

当 `iframe` 元素加载完成后，`iframeLoaded` 方法会被调用，你可以在这个方法中执行你需要的操作。