数学建模社区-数学中国
标题:
js实现浏览器不同页签之间通信
[打印本页]
作者:
2744557306
时间:
2024-3-29 17:50
标题:
js实现浏览器不同页签之间通信
一. 使用BroadcastChannel
' N, V3 _. q# D8 ?
0 N: q3 d/ T" M _3 I
const sendMsg = new BroadcastChannel('logout_channel')
# \9 f& {: Y! g4 T
sendMsg.postMessage('清除缓存')
6 v0 @+ n. N# U9 s v \
onMsg.onmessage = async (event) => {
, ^1 a/ P' g4 n1 F/ l [
console.log('event清除缓存', event.data)
. A9 X/ L; A+ I( Q8 v: i: C
}
/ O+ ]1 D1 d. B, A, Q* W
) O8 Z5 s) Z; Q; O0 I$ F' M+ O3 Y
二. 使用SharedWorker
. J. T: y0 w( @! m& j5 m; ?, C, N: ]
1.创建一个SharedWorker实例，并在其中编写处理消息的代码。
0 K! c" c, r5 F$ V! m; m
h0 S- D# w/ J. G
// shared-worker.js
& S8 O. _* c5 ]5 m! l- ~6 e" m
onconnect = function(e) {
% p" f% N2 g+ @" N2 J
var port = e.ports[0];
% c X3 e1 T( c0 g9 h9 \
8 n+ p2 s0 Q2 y1 `5 B6 f' R2 Q, S( K
port.onmessage = function(e) {
$ a% S- t) @& y9 T0 f
var message = e.data;
% t% M9 p0 \! J" O9 t8 X5 t
// 在这里处理接收到的消息
- ]% m9 ~+ U1 V3 @4 K8 [
};
* O) N8 f/ K5 @& q) I7 t3 [1 p7 J
+ w+ l( M+ _- J2 ?8 c. ]
port.start();
8 r: E, D2 L5 B+ Q* g
};
# u: |# f- V+ `' e0 a0 D
; d& f6 [; N. N8 g4 y
在多个窗口中分别创建SharedWorker的端口，并发送消息。
D' l, d' h# b% i1 p) f1 j) t
// window1.js
" ~7 w3 e3 [9 \
var worker = new SharedWorker('shared-worker.js');
% o! ]. ^0 s+ P9 h5 Y# _
var port = worker.port;
5 w" {4 r/ D9 }! z, e" n$ ~& }& O
. m( U, }1 F i, Y; S
port.onmessage = function(e) {
. Z- q+ `3 F7 w
var message = e.data;
2 \, B' L) n5 h' Q; ]
// 在这里处理接收到的消息
( V# i/ ?3 H& q" A d! V* d& g
};
/ b( k' X: i/ a
9 s- o" \2 z+ Y3 I' Z
port.postMessage('Hello from window1!');
, R) Q& t+ J& m) o6 h
2 ` S) A( V- c) B* f3 G8 r1 u
// window2.js
+ u8 J4 F9 h0 p& z6 X) u- m5 H* |. t
var worker = new SharedWorker('shared-worker.js');
N! @, E# V* O7 w, I* m
var port = worker.port;
5 i( u+ z1 q- c& @, {
A8 H6 b( o4 |2 Y6 z6 A
port.onmessage = function(e) {
0 N) e% T+ y- d3 h) w0 ?% k8 G: b
var message = e.data;
' ?! k+ M6 S. r
// 在这里处理接收到的消息
3 l8 }8 p3 b- u7 [! A
};
" H) {8 d( o0 R+ k& U
4 O1 E( e0 r8 g) t0 ]; _
port.postMessage('Hello from window2!');
: g0 e# o$ [& M% |; r& P, N
$ ^) |$ K; B7 w3 O2 V
在SharedWorker中处理接收到的消息，并向所有连接的窗口发送消息。
6 u: A3 ]# o; O1 M1 \8 G- ^# F2 G- E
// shared-worker.js
. K. J; }- p; `6 D+ \. u! w
onconnect = function(e) {
# M: a( L2 r# O; z8 r6 N. v$ |
var port = e.ports[0];
+ K, p. q8 G, |' n0 T$ ~; X. B
) g! m& F4 H5 i I) W" }
port.onmessage = function(e) {
2 Z: |3 Y8 ^5 L: r
var message = e.data;
* E0 p& A9 V6 z ?2 R
// 在这里处理接收到的消息
- K0 V0 h2 A, ?
6 r# W: y$ O7 T& R$ |
// 向所有连接的窗口发送消息
6 t9 u; T8 w1 O$ {' `
e.source.postMessage('Hello from SharedWorker!');
# W6 |* ~+ `$ q# |* Y6 P* R s
};
0 E$ C/ Y2 o6 U! {3 V e9 L6 v& Q
" T! z" F' q& x( P1 E& N `
port.start();
0 ^- y5 d) E9 w& j! b, d
};
2 w3 h1 G: H3 M
' X, [- h( h( S' w- r6 f4 N6 ?
5 i8 A! c" y) O- F* D" A
+ c1 T8 P) p5 n
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5