前端实现两个网站页面跨域通信

最新推荐文章于 2025-03-06 08:30:00 发布

原创最新推荐文章于 2025-03-06 08:30:00 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #jquery #layui #html

javascript 专栏收录该内容

6 篇文章

订阅专栏

问题描述：
A、B两个网站要实现跨域通信，可通过postMessage来实现。

A网站地址：A_HOST
B网站地址：B_HOST

A系统页面发送数据给B系统页面：调用B页面window对象的postMessage方法

//在A系统页面添加以下代码
let bIframeWin = null
 layer.open({
            type: 2,
            title:"B系统页面",
            area: ['96%', '96%'],
            content:B_HOST+"/pageB.html",
            success:function (layero, index) {
            //获取B页面window，用于后面向B页面传递信息
                bIframeWin = window[layero.find('iframe')[0]['name']];
            }
        });
//或通过window.open打开
//bIframeWin = window.open(B_HOST+"/pageB.html")
window.addEventListener('message', function(e){
    let act = e.data.act
    if (act == 'beReady') {
    //接收到B页面传来准备好了的消息，确保B页面已加载完再给它传递数据
       let data = {
            act: 'setInfo',
            params:params //一些你要传的参数
        };
        bIframeWin.postMessage(data, B_HOST); //发送数据给B页面（来自另一个跨域系统）
    }
}, false);

B系统页面监听消息：判断是不是指定的地址，是则接收信息，并调用A系统页面window.parent.postMessage回复父页面

//向打开B页面的opener发送消息，告诉它可以开始传递数据了
 window.opener && window.opener.postMessage({
            act: 'beReady'
        },A_HOST)
 window.addEventListener("message", function(event){ 
        if (event.origin !== A_HOST) 
        return; 
        if(event.data.act == "setInfo"){
            let params = event.data.params
            sessionStorage.setItem("token",JSON.stringify(params.token))
            //获取A系统页面的window->window.parent
             window.parent.postMessage({
                act: 'response',
                msg: {
                    answer: '我接收到啦！'
                }
            }, A_HOST);//'*' 不限制域
        }
}, false);