Vue下iframe如何实现和父窗口的通信

在父窗口页面代码：

 1 <template>
 2     <el-dialog
 3         title=""
 4         :visible.sync="visible"
 5         width="30%"
 6         class="ifr-dialog"
 7         center
 8         @opened="handleOpened">
 9         <div>
10             <iframe :src="src" ref="iframe"></iframe>
11         </div>
12     </el-dialog>
13 </template>
14 
15 <script>
16     export default {
17         name: 'IframeDialog',
18         props: {
19             visible: {
20                 type: Boolean,
21                 default: false
22             },
23             src: {
24                 type: String,
25                 default: ''
26             }
27         },
28         data() {
29             return {
30                 iframeWin: {}
31             };
32         },
33         methods: {
34             handleOpened() {
35                 this.iframeWin = this.$refs.iframe.contentWindow;
36             },
37             handleMessage (event) {
38                 // 根据上面制定的结构来解析iframe内部发回来的数据
39                 const data = event.data;
40                 console.log(data);
41             }
42         },
43         mounted () {
44             // 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
45             window.addEventListener('message', this.handleMessage);
46         }
47     }
48 </script>

View Code