mirror of
https://github.com/NohamR/knowledge-kit.git
synced 2026-05-25 04:17:17 +00:00
49 lines
1.5 KiB
Markdown
49 lines
1.5 KiB
Markdown
# 浏览器不通窗口之间的通信
|
||
|
||
## localStorage
|
||
|
||
“同源”情况下，一个窗口更新 localStorage，另一个窗口监听 window 对象的 “storage” 事件，来实现通信
|
||
|
||
```
|
||
window.localStorage.setItem('name','杭城小刘');
|
||
window.addEventListener('storage', function (e) {
|
||
console.log(e);
|
||
console.log(e.newValue);
|
||
})
|
||
```
|
||
|
||
## WebSocket
|
||
|
||
所有的 WebSocket 都监听同一个服务器地址，利用 `send` 发消息，利用 `onmessage` 获取消息的变化，不仅能窗口，还可以跨浏览器通信，兼容性最佳。只是需要消耗点服务器资源
|
||
```
|
||
var ws = new WebSockte('ws://192.168.0.0.1:8080/');
|
||
ws.onopen = function (event) {
|
||
ws.send({now: new Date()});
|
||
}
|
||
|
||
ws.onmessage = function (event) {
|
||
console.log(event)
|
||
}
|
||
```
|
||
|
||
|
||
## postMessage
|
||
|
||
借助 iframe 或 window.open
|
||
```
|
||
otherWindow.postMessage(message targetOrigin, [transfer])
|
||
```
|
||
|
||
## cookie + setInterval
|
||
|
||
在页面 A 设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否变化，如果变化就是进行刷新操作
|
||
由于 Cookies 在同一个域下可读，所以这样做的缺点是浪费资源
|
||
|
||
## SharedWorker
|
||
|
||
HTML5 中的 Web Worker 可以分为2种不同线程类型，一种是专用线程 Dedicated Worker，一种是共享线程 Shared Worker
|
||
- Dedicated Worker 直接使用 new Worker() 创建，这种 webWorker 是当前页面专有的
|
||
- SharedWorker 可以被多个 window、标签页、iframe 共同使用，但必须保证这些标签页都是同源的
|
||
|
||
|