保证postmessage已经处于监听

最新推荐文章于 2024-06-25 00:17:42 发布

它经不起推敲的

最新推荐文章于 2024-06-25 00:17:42 发布

阅读量247

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_46365130/article/details/135957597

版权

本文介绍了如何在Vue组件中使用`addEventListener`监听`message`事件，确保在iframe加载完成后，能在内容窗口中发送消息，实现父组件与子iframe之间的跨域通信，主要涉及IT技术中的DOM操作和跨域通信处理。

摘要由CSDN通过智能技术生成

  <template>
  <iframe
    ref="iframe"
    sandbox="allow-same-origin allow-scripts"
    :src="`${iframeUrl}`"
    frameborder="no"
  />
</template>
  methods: {
    addEventListener() {
      window.addEventListener("message", (e) => {
      //iframe onload事件无法确保在iframe中已经开始监听message，
      //所以采用message形式确保在iframe中已经开始监听message。
        let { type } = e.data;
        if(type === "onLoad") {
          this.$refs.iframe?.contentWindow?.postMessage({
            even: "formNo",
            params: this.formNo,
          }, "*");
        }
      });
    },
  },
  mounted() {
    this.addEventListener();
  },