在同一浏览器中的页面实例之间发送通知

Sending notifications between instances of the page in the same browser

本文关键字:之间 实例 通知 浏览器      更新时间:2023-09-26

是否有可能在同一域的两个页面实例(或两个不同的页面)之间创建一个发送消息的通道,但在两个不同的选项卡/窗口(同一台机器)使用新的HTML5 api ?

例如,我有一个页面与JavaScript单页应用程序,当我得到点击注销在一个窗口或登录我得到登录/注销在其他窗口。

有没有可能做到这一点没有websockets?也许WebRTC。我应该如何实现这样的东西?

正如@NiettheDarkAbsol建议的那样,您可以使用localstorage在同一浏览器中发送消息。下面是简短的POC代码(在vanilla JS中)

window.onload = function() {
    window.addEventListener('storage', storageEventHandler, false);
    function storageEventHandler(e) {
        console.log(localStorage.getItem(e.key));
    }
    var input = document.getElementsByTagName('input')[0];
    document.getElementsByTagName('button')[0].onclick = function() {
        localStorage.setItem('name', input.value);
    };
};
与html

<input/>
<button>notif</button>

唯一的限制是消息需要与前一条不同。如果您发送请求的id(如JSON-RPC),您可以修复它。

UPDATE:这是我刚刚做的一个简单的库:https://github.com/jcubic/sysend.js