h5 postmessage 跨域消息传递 demo

最新推荐文章于 2023-12-17 15:02:11 发布

弄啥叻

最新推荐文章于 2023-12-17 15:02:11 发布

阅读量238

点赞数 1

分类专栏： h5 postmessage 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43128309/article/details/106302679

版权

h5 postmessage 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

a文件下的ac.html 发送方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div onclick="as()">a</div>
</head>
<body>
</body>
<script>

    //弹出一个新窗口
    as=function () {
        var domain = 'http://localhost:8081';
        console.log(111);
        var myPopup = window.open(domain
                 + '/bc.html','myWindow');
        //

        // console.log(22);return false;
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
        console.log('send');

        window.addEventListener('message',function(event) {
            console.log(event,333);
            console.log('bc1 send');
            if(event.origin !== 'http://localhost:8081') return; //这个判断一下是不是我这个域名跳转过来的
            console.log('received response:  ',event.data);
            //进行发送
            myPopup.postMessage(message,'http://localhost:8081/bc.html');

        },false);

    }

</script>
</html>

b文件下的bc.html 接收方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div>b</div>
</head>
<body>

</body>
<script>
    //监听消息反馈
    window.addEventListener('message',function(event) {
        console.log(event);
        console.log('ac send');
        if(event.origin !== 'http://localhost') return; //这个判断一下是不是我这个域名跳转过来的
        console.log('received response:  ',event.data);

    },false);

    // //向a发送数据
    window.onload=function () {
        console.log('send bc');
        // console.log(window.opener);
        var message = {name:"站点bc",sex:"女"}; //你在这里也可以传递一些数据，obj等
        window.opener.postMessage(message,'http://localhost/a/ac.html');
    }
</script>
</html>

a窗口要确认b窗口已经打开,并准备完毕之后再向b传输数据