跨标签页通信

最新推荐文章于 2025-06-19 12:00:00 发布

weixin_45578530

最新推荐文章于 2025-06-19 12:00:00 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签：大数据

本文链接：https://blog.youkuaiyun.com/weixin_45578530/article/details/125602380

1、BroadCast实现跨标签页通信

index.html

<!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>
    <input type="text" id="content">
    <button id="btn">发送数据</button>
    <script>
        const content = document.querySelector('#content')
        const btn = document.querySelector('#btn')

        const broadCastChannel = new BroadcastChannel('load');
                btn.onclick=function(){
                    broadCastChannel.postMessage({
                        value:content.value
                    })
                }
    </script>
</body>

</html>

index2.html

<!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>
    <script>
        const broadCastChannel = new BroadcastChannel('load');
        broadCastChannel.onmessage = function (e) {
            console.log(e.data);
        }
    </script>
</body>

</html>

1、Service Worker实现跨标签页通信

index.html

<!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>
    <input type="text" id="content">
    <button id="btn">发送数据</button>
    <script>
        const content = document.querySelector('#content')

        //注册service worker
        navigator.serviceWorker.register('sw.js').then(() => {
            console.log('service worker 注册成功');
        })
        btn.onclick = function () {
            navigator.serviceWorker.controller.postMessage({
                value: content.value
            })
        }

    </script>
</body>

</html>

index2.html

<!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>
    <script>
        navigator.serviceWorker.register('sw.js').then(() => {
            console.log('service worker 注册成功');
        })
        navigator.serviceWorker.onmessage = function ({ data }) {
            console.log(data);
        }

    </script>
</body>

</html>

sw.js

self.addEventListener("message", async event => {
    //首先获取到所有注册了 service worker的客户端
    const clients = await self.clients.matchAll();
    clients.forEach(function(client)  {
        client.postMessage(event.data.value)
    });
})

3、storage实现跨标签页通信

index.html

<!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>

    <script>
        localStorage.name = "胡";
        localStorage.age = 20;
        console.log('信息已经设置');
    </script>
</body>

</html>

index2.html

<!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>
    <script>
        window.onstorage = function (e) {
            console.log("修改的键为：", e.key);
            console.log("之前的值为：", e.oldValue);
            console.log("修改后的值为：", e.newValue);
            console.log(e.storageArea);
            console.log(e.url);
        }
    </script>
</body>

</html>

4、SharedWorker实现跨标签页通信

index.html

<!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>
    <input type="text" id="content">
    <button id="btn">发送数据</button>
    <script>
        const content = document.querySelector('#content')
        const btn = document.querySelector('#btn')
        //注册service worker
       const worker=new SharedWorker('worker.js')
        btn.onclick=function(){
            worker.port.postMessage(content.value)
        }
    </script>
</body>

</html>

index2.html

<!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>
    <script>
        const worker=new SharedWorker('worker.js')
        worker.port.start();
        worker.port.onmessage=function(e){
            if(e.data){
                console.log('来自worker的数据',e.data);
            }
        }
        setInterval(function(){
            worker.port.postMessage('get')
        })
    </script>
</body>

</html>

worker.js

let data = ""
onconnect = function (e) {
    let port = e.ports[0];
    port.onmessage = function (e) {
        if (e.data === 'get') {
            port.postMessage(data);
            data = ""
        } else {
            data = e.data;
        }
    }
}

5、IndexDB实现跨标签通信

index.html

<!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>
    <h1>新增学生</h1>
    <div>
        <span>学生学号：</span>
        <input type="text" name="stuId" id="stuId">
    </div>
    <div>
        <span>学生姓名：</span>
        <input type="text" name="stuName" id="stuName">
    </div>
    <div>
        <span>学生年龄：</span>
        <input type="text" name="stuAge" id="stuAge">
    </div>
    <button id="addBtn">新增学生</button>
    <script src="./db.js"></script>
    <script>
        let btn = document.querySelector('#addBtn');
        let stuId = document.querySelector("#stuId");
        let stuName = document.querySelector("#stuName");
        let stuAge = document.querySelector("#stuAge");
        openDB('stuDB', 1).then(db => {
            btn.onclick = function () {
                addData(db, "stu", {
                    "stuId":stuId.value,
                    "stuName":stuName.value,
                    "stuAge":stuAge.value
                })
                stuId.value=stuAge.value=stuName.value=""
            }
        })

    </script>
</body>

</html>

index2.html

<!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>
    <h1>学生表</h1>
    <table id="tab"></table>
    <script src="./db.js"></script>
    <script>
        function render(arr) {
            let tab = document.querySelector("#tab");
            console.log(tab);
            tab.innerHTML = `<tr>
            <td>学号</td>
            <td>姓名</td>
            <td>年龄</td>
            </tr>`
            let str = arr.map(item => {
                return `<tr>
            <td>${item.stuId}</td>
            <td>${item.stuName}</td>
            <td>${item.stuAge}</td>
            </tr>`
            }).join("");
            tab.innerHTML += str;
        }
        async function renderTable() {
            let db = await openDB('stuDB', 1)
            let stuInfo = await getDataByKey(db, 'stu')

            render(stuInfo)
            setInterval(async () => {
                let stuInfo2 = await getDataByKey(db, 'stu');
                if (stuInfo2.length !== stuInfo.length) {
                    render(stuInfo2)
                }
            }, 1000)
        }
        renderTable();
    </script>
</body>

</html>

db.js

/**
 * 
 * @param {*} dbName  数据库名称
 * @param {*} version  仓库名称
 */

function openDB(dbName, version = 1) {
    return new Promise((resolve, reject) => {
        let db;
        //打开数据库，若没有则会创建
        const request = indexedDB.open(dbName, version);
        //数据库打开成功的回调
        request.onsuccess = function (event) {
            db = event.target.result;
            console.log('数据库打开成功');
            resolve(db);
        }
        //数据库打开失败的回调
        request.onerror = function (event) {
            console.log('数据库打开报错');
        }
        ////数据库有更新时候的回调
        request.onupgradeneeded = function (event) {
            //数据库创建或升级的时候会触发
            console.log('onupgradeneeded');
            db = event.target.result;
            let objectStore;
            //创建存储库（表）
            objectStore = db.createObjectStore('stu', {
                keyPath: "stuId", //主键
                autoIncrement: true //实现自增
            })
            //创建索引，在后面查询数据的时候可以根据索引查
            objectStore.createIndex('stuId', "stuId", { unique: true })
            objectStore.createIndex('stuName', "stuName", { unique: false })
            objectStore.createIndex('stuAge', "stuAge", { unique: false })
        }
    })
}
/**
 * 
 * @param {*} db 数据库实例
 * @param {*} storeName 仓库名称
 * @param {*} data 数据
 */
function addData(db, storeName, data) {
    let request = db.transaction([storeName], "readwrite")   //事物对象 指定表格名称和操作模式（”只读“或”读写“ ）
        .objectStore(storeName)  //仓库（表）对象
        .add(data)
    request.onsuccess = function (event) {
        console.log("数据写入成功");
    }
    request.onerror = function (event) {
        console.log("数据写入失败");
    }
}
/**
 * 
 * @param {*} db 数据库实例
 * @param {*} storeName 仓库名称
 * @param {*} key 主键值
 */
function getDataByKey(db, storeName, key) {
    return new Promise((resolve, reject) => {
        let transaction = db.transaction([storeName]) //事务
        let objectStore = transaction.objectStore(storeName) //仓库对象
        let request = objectStore.getAll(); //通过主键获取数据
        request.onerror = function (event) {
            console.log('事务失败');
        }
        request.onsuccess = function (event) {
            resolve(request.result);
        }
    })
}

6、cookie实现跨标签通信

index.html

<!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>
    <script>
        document.cookie = "name='xiejie'"
        console.log('cookie设置成功');
    </script>
</body>

</html>

index2.html

<!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>
    <script>
        let cookie = document.cookie;
        setInterval(() => {
            if (document.cookie !== cookie) {
                console.log(`cookies有更新，最新的值为${document.cookie}`);
                cookie = document.cookie
            }
        }, 1000)
    </script>
</body>

</html>

7、postMessage实现跨标签页通信

index.html

<!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>
    <button id="popBtn">弹出新窗口</button>
    <input type="text" id="content">
    <button id="btn">发送数据</button>
    <script>
        let popBtn = document.querySelector("#popBtn");
        let content = document.querySelector("#content")
        let btn = document.querySelector('#btn');
        let opener = null; // 用来保存window.open打开的窗口的的索引
        popBtn.onclick = function () {
            opener = window.open('index2.html', "123123", "height=400,width=400,top=20,resizeable=yes");
            console.log(opener);
        }
        btn.onclick = function () {
            let data = {
                value: content.value
            }
            //data代表是要发送的数据，第二个参数是origin,使用*代表所有域
            opener.postMessage(data,"*");
        }
    </script>
</body>

</html>

index2.html

<!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>这是页面二</p>
    <script>
        window.addEventListener('message',function(e){
            console.log(e.data);
        })  
    </script>
</body>

</html>

8、Websocket实现跨标签页通信

记得要先把server服务器打开

index.html

<!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>
    <input type="text" id="msg">
    <button id="send">发送消息</button>
    <script>
        let msg = document.querySelector("#msg");
        let btn = document.querySelector("#send");
        //建立websocket链接
        let ws = new WebSocket("ws://localhost:3000");
        btn.onclick = function () {
            let value = msg.value.trim();
            if (value !== "") {
                ws.send(value)
            }
        }
        window.onbeforeunload = function () {
            ws.close();
        }
    </script>
</body>

</html>

index2.html

<!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>
    <script>
        //建立websocket链接
        let ws = new WebSocket("ws://localhost:3000");
        let count = 1;
        ws.onopen = function () {
            ws.onmessage = function (event) {
                let oP = document.createElement('p');
                oP.innerHTML = `第${count}次接收到的消息为：${event.data}`
                document.body.appendChild(oP);
                count++;
            }
        }
        window.onbeforeunload = function () {
            ws.close();
        }
    </script>
</body>

</html>

server.js

//首先获取到一个WebSocketServer类
let WebSocketServer = require('ws').Server
//创建WebSocket服务器
let wss = new WebSocketServer({
    port: 3000
})
//该数组用于保存所有的客户端连接实例
let clients = []
//当客户端连接上WebSocket服务器的时候
//就会触发connection事件，该客户端的实例就会传如此回调函数
wss.on('connection', function (client) {
    //将当前客户端连接实例保存到数据里面
    clients.push(client);
    console.log(`当前有${clients.length}个客户端在线.....`);
    client.on('message', function (msg) {
        console.log('收到的消息为：' + msg);
        //接下来需要将收到的消息推送给其他所有的客户端
        for (const c of clients) {
            if (c !== client) {
                c.send(msg.toString())
            }
        }
    })
    client.on('close', function () {
        let index = clients.indexOf(this);
        clients.splice(index, 1);
        console.log(`当前有${clients.length}个客户端在线.....`);
    })
})
console.log('WebSocket服务器已经启动......');

以上只是我的学习笔记，方便以后复习使用。