vue中与其他网页通信

更新于：2023-02-17
原理：iframe+postMessage
依赖：“vue”: “^3.2.45”

需要嵌入iframe的网页

<template>
  <div>
    <button @click="sendMsg()">send message</button>

    <div class="browser-frame">
      <iframe
        ref="receiver"
        class="container"
        :src="urlAddr"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const receiver = ref(null);
const urlAddr = "http://localhost:5174";

onMounted(() => {
  window.addEventListener("message", receiveMessage, false);
});

const sendMsg = () => {
  try {
    console.log("father send");
    if (receiver) {
      receiver.value.contentWindow.postMessage(
        JSON.stringify({ method: "sayHi", data: "hello child" }),
        urlAddr
      );
    }
  } catch (err) {
    console.log("father send-------" + err.toString());
  }
};

const receiveMessage = (event) => {
  try {
    console.log("father receive");
    if (event.origin !== urlAddr) {
      // 验证消息来源地址
      return;
    }
    console.log(event.data);
  } catch (err) {
    console.log("father receive-------" + err.toString());
  }
};
</script>
<style lang="scss" scoped>
</style>

被嵌入的网页

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  window.addEventListener("message", receiveMessage, false);
});
const sendMsg = () => {
  try {
    console.log("child send");

    parent.postMessage(
      JSON.stringify({ method: "sayHi", data: "hello father" }),
      "*"
    );
  } catch (err) {
    console.log("child send-------" + err.toString());
  }
};

const receiveMessage = (event) => {
  try {
    console.log("child receive");
    console.log(event.data);
  } catch (err) {
    console.log("child receive-------" + err.toString());
  }
};
</script>

<template>
    <div>
    	<button @click="sendMsg()">send to father</button>
    </div>
</template>