多个浏览器标签页之间的通讯方法

最新推荐文章于 2023-05-30 16:41:04 发布

维多利亚少年-

最新推荐文章于 2023-05-30 16:41:04 发布

阅读量832

点赞数 1

分类专栏： cookie 不同标签页通讯浏览器文章标签：前端 js SharedWorker 浏览器标签页 locaStorage

本文链接：https://blog.csdn.net/weixin_45532305/article/details/107698563

版权

浏览器同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

不同标签页通讯

1 篇文章 0 订阅

订阅专栏

在一些需求中，可能会遇到在一个标签页修改了数据，在另一个标签页不用刷新也可以获取到改变后的数据。这就叫做标签页之间的通讯。

下面让我们看看浏览器标签页之间的通讯方法都有什么。

1. 通过locaStorage

在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容

在另一个标签页里面监听 storage 事件，在事件event对象属性中获取信息。即可得到 localstorge 存储的值，实现不同标签页之间的通信。

event事件对象包含以下信息

domain
newValue
oldValue
key

标签页A

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">
    <button id="btn">点击</button>
    <script>
        document.querySelector('#btn').onclick = function () {
        	// 获取输入数据
            var name=document.querySelector("#name").value
            // 在浏览器本地存储值
            window.localStorage.setItem('name', name)
        }
    </script>
</body>
</html>

标签页B

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
<script>
    // 监听storage，发生改变就会触发次事件
    window.addEventListener('storage', event => {
        console.log(`${event.key} = ${event.newValue}`)
    })
</script>

这样就解决了不同标签页之间的通信问题

2. 通过cookie

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

标签页A

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">
    <button id="btn">点击</button>
    <script>
        document.querySelector('#btn').onclick = function () {
        	// 获取输入数据
            var name=document.querySelector("#name").value
            // 在cookie存储值
            document.cookie = "name" + name
        }
    </script>
</body>
</html>

标签页B

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
<script>
    function getCookie (key) {
    	return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]
    }
    getCookie("name")
    setInterval(function(){ 
        console.log("name=" + getCookie("name"))
    }, 200)
</script>

通过这种方式也可以解决不同标签页之间的通讯

3. 通过SharedWorker

SharedWorker是html5浏览器的新特性，这种是可以多个标签页、iframe共同使用的。SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

首先新建一个share.js文件，可以把它理解为类似eventBus的服务端，可以连接不同标签页的桥梁。

let data = ''
onconnect = function(e) {
  let port = e.ports[0]
  // 注册一个onmessage监听信息的事件，客户端(即使用sharedWorker的标签页)发送message时就会触发
  port.onmessage = function(e) {
    
    if(e.data == 'get'){
        // 调用此方法，变量data的值回传给客户端
        port.postMessage(data)
    }else{
        // 客户端传递过来的数据存储到data变量中
        data=e.data
    }
  }
}

只需注册一个onmessage监听信息的事件，客户端(即使用sharedWorker的标签页)发送message时就会触发。

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

标签页A

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="log"></div>
    <input type="text" name="" id="text">
    <button id="get">get</button>
    <button id="set">set</button>
    <script>
            // 创建一个SharedWorker实例
            const worker = new SharedWorker('./shared.js')
            const get = document.getElementById('get')
            const set = document.getElementById('set')
            const text = document.getElementById('text')
            const log = document.getElementById('log')
            // 绑定监听worker实例的message
            // 服务端(即shared.js)每次接收到消息
            worker.port.addEventListener('message', function(e) {
                // e.data就是服务端发来的信息
                log.innerText = e.data
            }, false)
            worker.port.start() //使用addEventListener 绑定监听需要次此方法

            set.addEventListener('click',function(e){
                // 向服务端(即shared.js)发送信息
                worker.port.postMessage(text.value)
            },false)
    </script>
</body>
</html>

其实两个页面的代码完全一样，但是为了区分传送方和接收方，标签页A是传送方，标签页B是接收方

标签页B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="log"></div>
    <input type="text" name="" id="text">
    <button id="get">get</button>
    <button id="set">set</button>
    <script>
            // 创建一个SharedWorker实例
            const worker = new SharedWorker('./shared.js')
            const get = document.getElementById('get')
            const set = document.getElementById('set')
            const text = document.getElementById('text')
            const log = document.getElementById('log')
            // 绑定监听worker实例的message
            // 服务端(即shared.js)每次接收到消息
            worker.port.addEventListener('message', function(e) {
                // e.data就是服务端发来的信息
                log.innerText = e.data
            }, false)
            worker.port.start() //使用addEventListener 绑定监听需要次此方法

            get.addEventListener('click',function(e){
                // 向服务端(即shared.js)发送信息
                worker.port.postMessage('get')
            },false)
    </script>
</body>
</html>

这里就介绍了标签页通讯的三种方案，还有一种是通过webSocket协议来解决。这里就不一一阐述了。

维多利亚少年-

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
多个浏览器标签页之间的通讯方法

在一些需求中，可能会遇到在一个标签页修改了数据，在另一个标签页不用刷新也可以获取到改变后的数据。这就叫做标签页之间的通讯。下面让我们看看浏览器标签页之间的通讯方法都有什么。1. 通过locaStorage在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容在另一个标签页里面监听 storage 事件，在事件event对象属性中获取信息。即可得到 localstorge 存储的值，实现不同标签页之间的通信。event事件对象包含以下信息do
复制链接

扫一扫