vue中使用postMessage进行跨越传值

最新推荐文章于 2024-07-26 15:35:59 发布

beichen3997

最新推荐文章于 2024-07-26 15:35:59 发布

阅读量1.5k

点赞数 1

分类专栏： vue 跨域 postMessage

本文链接：https://blog.csdn.net/beichen3997/article/details/103031722

版权

vue 同时被 3 个专栏收录

92 篇文章 2 订阅

订阅专栏

跨域

17 篇文章 0 订阅

订阅专栏

postMessage

1 篇文章 0 订阅

订阅专栏

接受的页面

<!-- storeOperations.vue门店运营一览 -->
<template>
   <section class="main-content">
 
           <iframe id="child" width="0" src="http://www.list.com/acs/ceshi">                </iframe>  
    </section>
</template>

<script>
    
    console.log(localStorage.getItem("apiRouter"),'************************','验证');
    if(!localStorage.getItem("apiRouter")||localStorage.getItem("apiRouter").indexOf("webpack")!==-1){
         window.addEventListener('message', function(messageEvent) {
        var data = messageEvent.data;
        localStorage.setItem("apiRouter",data)
        console.info('message from2 child:', data);
        },false);
    }
   
</script>

<style scoped  lang="less">
   

</style>

发送的页面

<template>
   <section class="main-content">
       <el-button @click="sendData">传递数据测试</el-button>
    </section>
</template>

<script>
    import mixin from "pack/common/js/mixin";
    export default {
        mixins: [mixin],
        name:'ceshi001',
        data() {
            
            return {
                'pageName'              :getPagename(),                 //页面标题
                'tableList'             :[],                           //列表
                isLoading:false,
            }
        },
        mounted(){
            // this.$store.dispatch('getCache').then(res=>{
            //     if(res.success){
            //         Object.assign(this.$data , res.model);
            //         //页面是否需要刷新
            //         if(res.refresh){
            //             this.init();
            //         }
            //     }else{
            //         this.init(); 
            //     }
            // })
            //  this.init(); 
            // window.addEventListener('message', function(e) {
				
			// 	if (e.source != window.parent) 
			// 		return;
			// 		console.log(e.data,'接收父数据')
			// 	var list = localStorage.getItem("apiRouter");
			// 	window.parent.postMessage(list, '*');
			// 	console.log(list,'传递子数据')
            // }, false);
            var list = localStorage.getItem("apiRouter");
            window.parent.postMessage(list, '*');
        },
        methods: {
            init(){
               
            },
            sendData(){
                	//弹出一个新窗口
                var domain = 'http://225.225.225.225:8080';
                var myPopup = window.open(domain 
                            + '/acs/roleList','myWindow');
                
                //周期性的发送消息
                setTimeout(function(){
                    //var message = '当前时间是 ' + (new Date().getTime()); 
                    //     var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
                    // console.log('传递的数据是  ' + message);
                    myPopup.postMessage(localStorage.getItem("apiRouter"),domain);
                },1000);
            }
        },
        
    }
</script>

<style scoped>
.col-flex .form-label{
    width: 120px;
}
.warnFont{
    color: #FF4200!important;
}
.add{
    font-size:17px;
    margin: 0 5px;
    cursor: pointer;
    /* padding: 10px; */
    padding: 0 5px;
    background: url('./img/arrowdown.png') center center no-repeat;
    opacity: .3;
}
.reduce{
    font-size:17px;
    margin: 0 5px;
    padding: 0 5px;
     cursor: pointer;
    background: url('./img/arrowup.png') center center no-repeat;
    opacity: .3;
}
.open-toggle{
    /* color:#409EFF; */
    opacity: 1;
}
</style>

完成代码解决您的问题