Vue中使用iframe踩坑问题记录 iframe+postMessage

2023年6月11日上午11:21 • JavaScript

下面详细讲解Vue中如何使用iframe踩坑问题记录。

一、问题描述

在Vue项目中，使用iframe嵌入外部网页存在诸多问题。其中，最常见的问题就是iframe中的页面无法获取父级页面的DOM元素和数据。这是由于Vue会对DOM做出一些特殊处理，导致iframe无法获取到相应的元素。针对这种情况，我们需要使用postMessage来进行消息传递，从而让iframe和父级页面能够进行通信。

在此，我们将通过一个实际的场景来演示如何在Vue中使用iframe，并讲述其中的踩坑点。

二、实例演示

1. 父级页面实现

首先，我们需要在父级页面中嵌入一个iframe，并且通过postMessage向其中传递数据。

<template>
  <div class="container">
    <iframe ref="childIframe" src="./child.html" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取子页面的window对象
    let childWindow = this.$refs.childIframe.contentWindow;

    // 监听子页面发送的消息
    window.addEventListener("message", event => {
      if (event.source === childWindow) {
        // 输出子页面传递的数据
        console.log(event.data);
      }
    });

    // 给子页面发送消息
    childWindow.postMessage("hello world", "*");
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

在上述代码中，我们使用了Vue的ref指令来获取了iframe的DOM引用。随后，通过contentWindow属性获取了子页面的window对象，并为其添加了消息监听器。当子页面向父页面发送消息时，父页面会通过监听器捕获到消息，并打印出来。最后，我们使用postMessage方法向子页面发送一条消息。

2. 子级页面实现

接下来，我们需要在子级页面中进行数据的接收和发送。同样地，我们使用Vue进行开发。

<template>
  <div class="container">
    <form>
      <input type="text" v-model="message" placeholder="请输入消息" />
      <button type="button" @click="sendMessage">发送</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    }
  },

  methods: {
    sendMessage() {
      // 向父页面发送消息
      parent.postMessage(this.message, "*");
    }
  }
}

</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input {
  margin-bottom: 20px;
}
</style>

在上述代码中，我们为“发送”按钮添加了一个点击事件并绑定了一个sendMessage方法。当点击按钮时，该方法会向父级页面发送一个消息，消息的内容为input框中输入的信息。