Vue3 iframe

Vue3使用iframe引入本地html文件出问题，会一直调用自己的主页界面，不会调用我引入的界面

先直接访问你 iframe的路径看一下 是什么

iframe和图片一样，传入的路劲非完整路劲就会加上当前域名，所以访问的还是你当前主页，加上域名或者使用绝对路径

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7451375
• 这篇博客也不错, 你可以看下vue iframe 宽高自适应
• 除此之外, 这篇博客: Vue嵌入iframe，两个工程间的通信中的 实现 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  父页面代码：

  <template>
    <div>
      <div class="box">
        <span>当前页接收的iframe信息：</span>
        <span style="color:red;">{{receive}}</span>
      </div>
      <div class="box">
        <el-input placeholder="输入内容向iframe发送" v-model="msg.content" style="width:180px;"></el-input>
        <el-button @click="Send">发送</el-button>
      </div>
      <div style="height:500px">
        <iframe
          :src="url"
          ref="iframe"
          style="height: 100%;width:100%; frameborder=no"
          frameborder="no"
          border="0"
          marginwidth="0"
          marginheight="0"
        ></iframe>
      </div>
    </div>
  </template>
  <script>
  export default {
    mounted() {
      window.addEventListener("message", event => {
        this.receive = event.data.content;
      });
    },
    data() {
      return {
        url: "http://192.168.1.194:8080/child",
        receive: "",
        msg: { content: "" }
      };
    },
    methods: {
      Send() {
        this.$refs.iframe.contentWindow.postMessage(this.msg, "*");
      }
    }
  };
  </script>
  

  iframe页面代码:

  <template>
    <div>
      <div class="box">
        <span>iframe接收的信息:</span>
        <span style="color:red;">{{receive}}</span>
      </div>
      <div class="box">
        <el-input placeholder="输入内容向父页面发送" v-model="msg.content" style="width:180px;"></el-input>
        <el-button @click="Send">发送</el-button>
      </div>
    </div>
  </template>
  <script>
  export default {
    mounted() {
      window.addEventListener("message", event => {
        debugger;
        this.receive = event.data.content;
      });
    },
    data() {
      return {
        receive: "",
        msg: { content: "" }
      };
    },
    methods: {
      Send() {
        window.parent.postMessage(this.msg, "*");
      }
    }
  };
  </script>
  

  页面效果：
  
  如果addEventListener多次被调用，可以试试下面这种方法

  window.onmessage = function (event) {}
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^