vue iframe预加载

在 Vue 中预加载 `<iframe>` 可以通过使用 `v-if` 和 `v-else` 来实现。首先，你可以在 Vue 组件的模板中使用 `v-if` 来判断是否要加载 `<iframe>`。如果需要预加载，则可以在 `mounted` 生命周期钩子中加载 `<iframe>`，然后通过 `v-else` 来渲染它。

以下是一个示例：

<template>
  <div>
    <div v-if="isLoaded"> 
      <!-- 当预加载完成后，显示内容 -->
      <iframe src="https://example.com"></iframe>
    </div>
    <div v-else>
      <!-- 加载时显示的内容 -->
      <p>Loading...</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoaded: false // 是否已经加载完成
    };
  },
  mounted() {
    // 在 mounted 钩子中进行预加载
    this.loadIframe();
  },
  methods: {
    loadIframe() {
      // 使用 JavaScript 动态创建 iframe 元素
      const iframe = document.createElement('iframe');
      iframe.src = 'https://example.com';
      iframe.onload = () => {
        // 当 iframe 加载完成时，设置 isLoaded 为 true
        this.isLoaded = true;
      };
      // 将 iframe 添加到页面中
      document.body.appendChild(iframe);
    }
  }
};
</script>

这个示例中，当组件被挂载后，会使用 JavaScript 动态创建并加载 `<iframe>`。在加载完成后，通过设置 `isLoaded` 的值为 `true`，来显示 `<iframe>`。在加载过程中，会显示 "Loading..." 的文本。