vue项目嵌套iframe，发送、接收数据_vue和iframe通过vuex实现通信

作者：我家小花儿 | 2024-03-21 23:50:22

踩

vue和iframe通过vuex实现通信

<template>
    <div class="home">
        <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe>
    </div>
</template>
 
<script>
    export default {
        mounted() {
            let mapFrame = this.$refs['mapFrame']
            if (mapFrame.attachEvent){  //兼容浏览器判断
                mapFrame.attachEvent("onload", function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage({
                        method: 'getBaseInfo',
                        data:'我是vuex state的数据'
                    },'*')
                })
            } else { 
                mapFrame.onload = function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage({
                        method: 'getBaseInfo',
                        data:'我是vuex state的数据'
                    },'*')
                } 
            }
            
        }
    }
</script>
 
<style scoped lang="stylus">
.home {
    .mapFrame {
        height: 300px;
        width: 500px;
    }
}
</style>



    子页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iframe嵌套网页测试</title>
</head>
<body>

    <script>
        window.addEventListener('message',function(e){
            console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
            console.log(e.origin,e.data)
        })  
        // window.postMessage({
        //     method:'localtest',
        //     data:'ddddddddddddddddddddddddddddd'
        // },'*')
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】