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>