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>
