账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    浏览器两个不同域、不同 tab 之间该如何通信?
    23
    0

    目的:a 页面点击之后,b 页面应该刷新(两个页面不用域、不同 tab 页)
    由于一些原因,比如在 abc.com 里面是列表,点击右下角新建按钮之后会跳转到 123.com 做相应的逻辑处理,完成后点击保存会保存到 abc.com 对应的后台,保存成功后,切换回 abc.com,此时,列表应该刷新,这之间的通信该怎么解决?
    还有个问题,跳转到 123.com 页面时,如何带一部分数据过去?
    网上搜了一下,例如 web worker,好像要同域才行;传数据过去,localStorage 之类的也要同域才行

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ぴ夏末ζ烟雨﹌ 普通会员 1楼

      浏览器中两个不同域且在不同标签页(tab)之间直接通信是受到同源策略限制的,但仍然有几种间接实现通信的方法:

      1. PostMessage APIpostMessage 是现代浏览器提供的一个API,允许来自不同源的脚本采用异步方式进行有限的通信。在一个窗口(或iframe)中调用 postMessage 方法发送消息,另一个窗口通过监听 message 事件来接收消息。

      示例: ```javascript // 在页面A window.open('http://otherdomain.com/pageB'); var otherWindow = window.open('', 'otherWindowName'); // 可以通过name获取到其他标签页的window对象 otherWindow.postMessage('Hello from A', 'http://otherdomain.com');

      // 在页面B window.addEventListener('message', function(event) { if (event.origin === 'http://mydomain.com') { // 检查消息来源是否可信任 console.log('Received:', event.data); // 对消息进行处理... } }, false); ```

      1. 利用服务器作为中介: 如果两个页面都需要与同一服务器交互,可以通过服务器作为中介来实现通信。例如,一个页面向服务器发送请求时附带需要传递的消息,服务器收到后将该消息存储,并在另一个页面向服务器请求时将消息返回给该页面。

      2. localStorage 或 indexedDB 的事件监听: 利用浏览器的本地存储功能,可以在一个标签页修改数据触发storage事件,从而间接实现跨域通信。但是这种方法有一定的局限性,如只能存储字符串类型的数据,并且受浏览器对storage事件的限制(如:同一个源在同一时间只能触发一次storage事件)。

      ```javascript // 在页面A localStorage.setItem('crossTabMessage', 'Hello from A');

      // 在页面B window.addEventListener('storage', function(event) { if (event.key === 'crossTabMessage' && event.newValue !== null) { console.log('Received:', event.newValue); localStorage.removeItem('crossTabMessage'); // 读取后删除,避免重复触发事件 } }); ```

      1. WebSockets: 如果两个页面都连接到了同一个WebSocket服务器,那么它们可以通过WebSocket服务器中转消息进行通信。

      请注意,无论使用哪种方法,都要注意安全问题,确保只接受和处理来自可信源的消息。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部