为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第15天 如何实现网页多标签通讯?

【九月打卡】第15天 如何实现网页多标签通讯?

2022.09.21 17:04 51浏览

第一模块(课程信息):

课程名称: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(‘内容’,’’);*

第四模块(学习截图):

图片描述
图片描述
图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
4

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消