vue iframe 空白

Vue.js中的iframe空白问题通常是由于内容加载时间过长、跨域访问限制、或者Vue实例没有正确挂载等原因造成的。要解决这个问题，可以尝试以下几种方法：

1. 确保iframe的内容可以被访问，即跨域设置正确。如果你在开发环境中遇到问题，可能需要在服务器配置文件中添加相应的CORS策略。

2. 使用Vue的生命周期钩子来确保iframe内容加载完毕再进行操作。可以在Vue实例的mounted钩子中使用document.querySelector来检查iframe是否加载完成。

3. 如果是通过Vue Router管理iframe内容的页面，需要确保路由切换后，iframe能够加载新的URL内容。

示例代码：

<template>
  <div>
    <iframe ref="myIframe" src="about:blank" style="width:100%;height:600px;"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const iframe = this.$refs.myIframe;
      if (iframe.contentWindow && iframe.contentWindow.document) {
        // iframe内容已加载
      } else {
        // 可以设置一个定时器，定期检查
        setInterval(() => {
          if (iframe.contentWindow && iframe.contentWindow.document) {
            // iframe内容已加载
            clearInterval(timer);
          }
        }, 100);
      }
    });
  }
}
</script>