HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 1576px;
height: 1070px;
margin: 0 auto;
background: #f00;
word-break: break-all;
}
</style>
</head>
<body>
<div class="main">
<iframe id="Iframe-data" border="0" src="VUE地址" width="100%" height="100%"></iframe>
<script>
// 等iframe加载完成后，将数据以message的形式发送给Vue项目于平台，平台接收消息
document.getElementById('Iframe-data').onload = function() {
this.contentWindow.postMessage({
title: '这是个标题',
token: '这是个内容'
}, '*');
};
</script>
</div>
</body>
</html>
VUE页面接收message
<template>
</template>
<script>
export default {
data () {
return {
}
},
created(){
window.addEventListener('message', function(event) {
console.log(event)
console.log(window.location.origin)
if (event.origin === 'HTML所在url') {
const params = event.data;
console.log(params.title);
console.log(params.content);
// 处理参数，例如更新Vue实例的数据等
}
});
}
}
</script>
