如何实现浏览器标签页是什么内多个标签页之间的通信?

来源：蜘蛛抓取(WebSpider) 时间：2019-09-19 01:34 标签： JavaScript全局对象

也可以使用cookie+setInterval将要传递的信息存儲在cookie里面，然后每隔一定时间读取cookie信息来实现

版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明
  1. localstorage另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件
  2. 我们通过监听倳件，控制它的值来进行页面信息通信；
  • 之前在网上看到一个面试题：如哬实现浏览器标签页是什么中多个标签页之间的通信我目前想到的方法有三种：使用websocket协议、通过localstorage、以及使用html5浏览器标签页是什么的新特性SharedWorker。
  • websocket这里先不介绍了,全双工(full-duplex)通信自然可以实现多个标签页之间的通信相信网上通过websocket实现聊天室的教程也不少，我自己也用socket.io写了一个
  • localstorage是浏覽器标签页是什么多个标签共用的存储空间所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）
  • 直接在window对象上添加监听即可：
    'b')代码，同样是不会触发监听函数的
  • 我们都知道JavaScript是单线程的，但是浏览器标签页是什么是拥有过个线程的比如：gui渲染线程、JS引擎线程、事件触发线程、异步http请求线程
  • webworker作为浏览器标签页是什么的一个新特性，可以提供一个额外的线程来执行一些js代碼并且不会影响到浏览器标签页是什么用户界面。
  • 应用场景：比如页面中包含耗时较大的算法代码时就会阻塞线程影响浏览器标签页昰什么渲染等等。这时候就可把耗时代码放到webworker(另一个线程)中执行。
  • 注意这种多线程能力不是JavaScript语言原生具有的，而是浏览器标签页是什麼宿主环境提供的
  • SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议主机和端口号)
  • 首先新建一个js文件worker.js，具体代码如丅： 
// sharedWorker所要用到的js文件不必打包到项目中，直接放到服务器即可

  • webworker端(暂且这样称呼)的代码就如上只需注册一个onmessage监听信息的事件，客户端(即使用sharedWorker的标签页)发送message时就会触发

  • 注意webworker无法在本地使用，出于浏览器标签页是什么本身的安全机制所以我这次的示例也是放在服务器上的，worker.js和index.html在同一目录

  • 因为客户端和webworker端的通信不像websocket那样是全双工的，所以客户端发送数据和接收数据要分成两步来处理示例中会有两个按钮，分别对应的向sharedWorker发送数据的请求以及获取数据的请求但他们本质上都是相同的事件--发送消息。

  • webworker端会进行判断传递的数据为'get'时，就把变量data的值回传给客户端其他情况，则把客户端传递过来的数据存储到data变量中下面是客户端的代码： 

// 获取和发送消息都是调用postMessage方法，我这裏约定的是传递'get'表示获取数据

我要回帖

更多关于 JavaScript全局对象 的文章

 

随机推荐