在实现GitHub的oAuth登录时,需要解决页面窗口间跨域值传递的问题,so,把存在很久的页面间传递值的方式翻了出来。

假设A页面使用window.open打开了B页面的情况下

当A、B页面域相同时

B页面中直接通过window.opener.functionInA(params)调用A页面中声明的functionInA(params),也可以直接操作A页面中的元素。

当A、B页面域不同时(跨域)

需要借助window.postMessage()window.addEventListener()

假设A页面的域名为 https://www.example.com/
假设B页面的域名为 https://www.sourceexample.com

在A页面中注册message事件监听

window.addEventListener('message',function(e){
    // 这里对消息的来源进行检查,针对不同域发送来的数据进行区分
    if(e.origin == "https://www.sourceexample.com"){
        console.log(e.data);
    }
})

在B页面中使用postMessage()发送数据

window.opener.postMessage(data,"https://www.example.com/");
// 第一个参数为需要发送的数据
// 第二个参数为发送数据的目标域,可以使用"*"表示不限制,但这很不明智

上述的玩法同样适用于页面中的frame,不在此赘述。

参考资料:
MDN web docs window.postMessage

原创文章采用 CC BY-NC-SA 4.0协议 进行许可,转载请著名转自: html页面间数据传递