1.在父界面中div中定义 <iframe> ，以及<iframe> 属性设置和子界面嵌入
<template>
<div>
<h1>父页面</h1>
<div>{{ message }}</div>
<iframe ref="myIframe" src="http://172.35.4.64:8080/hzs/newPgae.html" width="100%" :height="screenHeight"
frameborder="0" allowfullscreen></iframe>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
screenHeight: document.body.clientHeight,
};
},
mounted() {
window.addEventListener('message', this.handleMessage);
},
beforeDestroy() {
window.removeEventListener('message', this.handleMessage);
},
methods: {
handleMessage(event) {
// 确保消息来源是可信的
if (event.origin === 'http://172.35.4.64:8080') {
this.message = event.data.message;
}
}
}
};
</script>
-
frameborder设置边框隐藏 allowfullscreen属性允许 iframe 支持全屏 src是本地地址（必须http地址路径，放置文件地址路径是加载不出来的）
2.子界面使用 window.parent.postMessage(...) 将消息发送到父页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>子页面</title>
</head>
<body>
<h1>子页面</h1>
<button id="sendMessage">发送消息到父页面</button>
<script>
document.getElementById("sendMessage").addEventListener("click", () => {
// 使用 postMessage 发送消息到父页面
window.parent.postMessage({ message: "Hello from child!" }, "*");
});
</script>
</body>
</html>
-
子界面HTML文件放置位置
1.png
