摘要：实现浏览器内多个标签页之间的通信第一种方式协议首先我们得了解是什么它是一种网络通信协议为什么会用到因为有缺陷，通信只可以由客户端发起，服务器无法主动向客户端发送消息。然后还有种共享，这种是可以多个标签页共同使用的。
实现浏览器内多个标签页之间的通信
第一种方式：websocket协议.
1.首先我们得了解websocket是什么？
它是一种网络通信协议
2.为什么会用到websocket?
因为http有缺陷，通信只可以由客户端发起，服务器无法主动向客户端发送消息。
但如果这时，服务器有连续变化的状态，那么就只能使用轮询的方式来访问。
轮询：每隔一段时间，就发出一个询问.
因为websocket拥有全双工(full-duplex)通信自然可以实现多个标签页之间的通信.
第二种方式：localstorage
localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信
这里补充一点其他的：session是会话级的存储空间，每个标签页都是多带带的
使用方式：直接在window对象上添加监听，以下为例子：
标签页1：
标签页2：
storage事件，针对都是非当前页面对localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。
第三种方式：html5浏览器的新特性SharedWorker
关于SharedWorker
普通的webworker直接使用new Worker()即可创建，这种webworker是当前页面专有的。然后还有种共享worker(SharedWorker)，这种是可以多个标签页、iframe共同使用的。
SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)
使用方式
首先新建一个js文件worker.js，具体代码如下：
// sharedWorker所要用到的js文件，不必打包到项目中，直接放到服务器即可
let data = ""
onconnect = function (e) {
let port = e.ports[0]
port.onmessage = function (e) {
if (e.data === "get") {
port.postMessage(data)
} else {
data = e.data
}
}
}
webworker端(暂且这样称呼)的代码就如上，只需注册一个onmessage监听信息的事件，客户端(即使用sharedWorker的标签页)发送message时就会触发.
注意点
1.webworker无法在本地使用，出于浏览器本身的安全机制，所以我这次的示例也是放在服务器上的，worker.js和index.html在同一目录。
2.因为客户端和webworker端的通信不像websocket那样是全双工的，所以客户端发送数据和接收数据要分成两步来处理。示例中会有两个按钮，分别对应的向sharedWorker发送数据的请求以及获取数据的请求，但他们本质上都是相同的事件--发送消息。
3.webworker端会进行判断，传递的数据为"get"时，就把变量data的值回传给客户端，其他情况，则把客户端传递过来的数据存储到data变量中。下面是客户端的代码：
// 这段代码是必须的，打开页面后注册SharedWorker
//显示指定worker.port.start()方法建立与worker间的连接
if (typeof Worker === "undefined") {
alert("当前浏览器不支持webworker")
} else {
let worker = new SharedWorker("worker.js")
worker.port.addEventListener("message", (e) => {
console.log("来自worker的数据：", e.data)
}, false)
worker.port.start()
window.worker = worker
}
// 获取和发送消息都是调用postMessage方法，我这里约定的是传递"get"表示获取数据。
window.worker.port.postMessage("get")
window.worker.port.postMessage("发送信息给worker")
webSocket如何兼容低浏览器？
1.Adobe Flash Socket
2.ActiveX HTMLFile (IE)
3.基于 multipart 编码发送 XHR
4.基于长轮询的 XHR
以上内容的参考链接 - 多个标签实现通信
关于websocket原理的有趣解释
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117458.html
摘要：实现浏览器内多个标签页之间的通信第一种方式协议首先我们得了解是什么它是一种网络通信协议为什么会用到因为有缺陷，通信只可以由客户端发起，服务器无法主动向客户端发送消息。然后还有种共享，这种是可以多个标签页共同使用的。 实现浏览器内多个标签页之间的通信 第一种方式：websocket协议.1.首先我们得了解websocket是什么？它是一种网络通信协议2.为什么会用到websocket?因...
摘要：实现浏览器内多个标签页之间的通信第一种方式协议首先我们得了解是什么它是一种网络通信协议为什么会用到因为有缺陷，通信只可以由客户端发起，服务器无法主动向客户端发送消息。然后还有种共享，这种是可以多个标签页共同使用的。 实现浏览器内多个标签页之间的通信 第一种方式：websocket协议.1.首先我们得了解websocket是什么？它是一种网络通信协议2.为什么会用到websocket?因...
摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。 浏览器的结构 浏览器的主要组件包括： 用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。 用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...
摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。 浏览器的结构 浏览器的主要组件包括： 用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。 用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...
摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。 浏览器的结构 浏览器的主要组件包括： 用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。 用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...
阅读 2293·2021-09-22 15:27
阅读 3165·2021-09-03 10:32
阅读 3490·2021-09-01 11:38
阅读 2492·2019-08-30 15:56
阅读 2205·2019-08-30 13:01
阅读 1529·2019-08-29 12:13
阅读 1407·2019-08-26 13:33
阅读 882·2019-08-26 13:30
