html页面间数据传递

z4zr 2019-11-12 PM 2533℃ 0条

在实现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
window.open.postMessage用法

标签: 跨域, html, 页面间传值

非特殊说明,本博所有文章均为博主原创。

评论啦~