多标签页之间的通信

解决方案有两种思路:浏览器端 解决方案、服务器端解决方案。

一、浏览器端解决方案:

思路:本地数据存储

html 复制代码
<!-- index01.html -->
<input id="name"> 
<input type="button" id="btn" value="提交">

1. localStorage

原理:localStorage 在所有同源 url 中都是共享的(localStorage 存储在客户端硬盘,两个页面位于不同浏览器也可以共享)。

注意:在不同的页面修改 localStorage,才能够被监听到,相同页面、重复设置相同的值,都是无法被监听的。

用法:

javascript 复制代码
// index01.html
btn.addEventListener('onclick', function () {
    localStorage.setItem("key", value);
});
javascript 复制代码
// index02.html
window.addEventListener("storage", function (e) {
    console.log(e);
});

原理:同源可访问。

注意:cookie 无法监听变化,需要通过一个定时器,每隔一段时间获取一次数据。

用法:

javascript 复制代码
// index01.html
document.cookie = "key=" + value;
javascript 复制代码
// index02.html
function getCookie(key) {
    // 从cookie中获取并解析数据
    return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]; 
} 
setInterval(function(){ 
    console.log("key=" + getCookie("key")); 
}, 5000);

二、服务器端解决方案:

1. websocket(H5新增的协议)

原理:websocket建立的是全双工通讯,服务器也可以主送发送数据给客户端。只要让服务器作为中转站,就可以实现两个页面的通讯。

javascript 复制代码
// index01.html 与服务器建立 全双工 通讯(index02.html同理)
const socket = new WebSocket('ws://localhost:8080');  // 与服务器建立全双工连接

// 连接建立时触发
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');   // 发送数据给服务器
});

// 客户端接收服务端数据时触发
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);  // 监听服务器传回的数据
});

socket.send(); // 发送数据

2. SharedWorker(H5新特性)

首先新建一个worker.js,不必打包到项目中,直接放到服务器即可:

javascript 复制代码
let data = '';
let onconnect = function (e) {
    let port = e.ports[0];
    port.onmessage = function (e) {
        if (e.data === 'getData') {
            port.postMessage(data)
        } else {
            data = e.data
        }
    }
}

index01.js、index02.js:

javascript 复制代码
const worker = new SharedWorker('worker.js');

// 与worker建立连接
worker.port.start();

worker.port.addEventListener('message', function (e) {
    console.log('worker发来的数据:', e.data);
}, false);

setBtn.addEventListener('click', function (e) {
    worker.port.postMessage(value);
}, false);

getBtn.addEventListener('click', function (e) {
    // 获取发送到worker的数据(约定 'getData' 是获取数据)。
    worker.port.postMessage('getData');
}, false);
相关推荐
一洽客服系统9 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead23 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
荔枝hu1 小时前
springboot生成pdf方案之dot/html/图片转pdf三种方式
spring boot·pdf·html
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr2 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
元气小嘉2 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能