第一模块（课程信息）:
课程名称:2周刷完100道前端优质面试真题
课程章节:第六章第二十一节 如何实现网页多标签通讯？
主讲老师:双越
第二模块（课程内容）:
课程内容概述
1、使用websocket
- 无跨域限制
- 需要服务端支持，成本高
2、localStorage通讯
- 同域的A和B两个页面
- A页面设置localStorage
- B页面可以监听到localStorage值的修改
3、使用SharedWorker通讯
- SharedWorker是WebWorker的一种
- WebWorker可开启子进程执行JS，但不能操作DOM
- SharedWorker可单独开启一个进程，用于同域页面通讯
代码演示
封装SharedWorker
const set = new Set();
onconnect = event =>{
const port = event.ports[0];
set.add(port);
// 接收消息
port.onmessage = e =>{
// 广播消息
set.forEach(p=>{
if(p===port) return;
p.postMessage(e.data);
})
}
// 发送消息
port.postMessage('worker.js done');
}
使用方式：
list页面
const worker = new SharedWorker('./worker.js');
worker.port.onmessage = e =>console.log('list',e.data);
detail页面
const worker = new SharedWorker('./worker.js')；
worker.port.postMessage('detail go...')；
总结：
Websocket需要服务器端，成本高
localstorage简单易用，推荐
SharedWorker 调试不方便，不兼用IE11，只支持同域
拓展：网页和iframe如何通讯？
- 使用postMessage通讯
- 注意跨域的限制和判断
具体案例演示
主页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
index 页面
<button id="btn1">发送消息</button>
</p>
<iframe id="iframe1" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./child.html" ></iframe>
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',()=>{
console.info('index clicked');
window.iframe1.contentWindow.postMessage('hello','*');
});
window.addEventListener('message',event=>{
console.info('origin',event.origin);//来源的域名
console.info('index received',event.data);
})
</script>
</body>
</html>
iframe页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
child页面
<button id="btn1">发送消息了</button>
</p>
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click',()=>{
console.info('child clicked');
window.parent.postMessage('world',"*");
})
window.addEventListener('message',event=>{
console.info('origin',event.origin);
console.info('child received data',event.data);
})
</script>
</body>
</html>
运行结果如下：
第三模块（学习心得）：
1、通过这次学习掌握了不常用的SharedWorker通讯方式
2、掌握了iframe和页面之间的通讯
父页面向iframe页面：
window.#iframeId.contentWindow.postMessage(‘内容’，’’);*
iframe向父页面：
window.parent.postMessage(‘内容’,’’);*
第四模块（学习截图）：
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦