浏览器内多个标签页之间的通信方式有哪些?

传递方式

1.WebSocket (可跨域)

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

2.postMessage(可跨域)

window.postMessage()方法安全地启用Window对象之间的跨源通信。

对将接收消息的窗口的引用,获得此类引用的方法包括:


1.iframe标签

2.Window.open (生成一个新窗口然后引用它)

3.Window.opener (引用产生这个的窗口)

3.SharedWorker

4.Server-Sent Events

以上的传递方法仅供了解几乎很少使用到

5.localStorage(可以添加事件监听)

localstorage是浏览器多个标签共用的存储空间,所以可以用来实现多标签之间的通信(ps:session是会话级的存储空间,每个标签页都是单独的)。 直接在window对象上添加监听即

​
//在同源的两个页面中,可以监听 storage 事件
            window.addEventListener("storage", function (e) {
                alert(e.newValue);
            });

​
//在同一个页面中,对 localStorage 的 setItem 方法进行重写
            var orignalSetItem = localStorage.setItem;
            localStorage.setItem = function(key,newValue){
                    var setItemEvent = new Event("setItemEvent");
                    setItemEvent.newValue = newValue;
                    window.dispatchEvent(setItemEvent);
                    orignalSetItem.apply(this,arguments);
            }
            window.addEventListener("setItemEvent", function (e) {
                alert(e.newValue);
            });
            localStorage.setItem("name","wang");
            });
            

6.Cookies

Cookies在同一个域名内,并且目录也得相同,可以参考第三方库

cookies详情

相关文章

学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习...
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面...
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生...
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服...