web端分屏异显实现技术思路-同主机同域名环境

最新推荐文章于 2024-06-25 09:57:50 发布

原创最新推荐文章于 2024-06-25 09:57:50 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#分屏异显 #多标签通信 #postMessage #localStorage

其他专栏收录该内容

5 篇文章

订阅专栏

本文探讨了网页间数据共享与通信的多种方法，包括Cookie、LocalStorage、SessionStorage、IndexedDB等存储方式，以及WebSocket、window.postMessage()、WebWorker和window.onstorage的通信机制。分析了各方案的优缺点，如数据量限制、跨源通信能力及实现复杂度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点：

数据存储
两屏之间的通信

存储

Cookie 受同源策略限制，支持多标签页数据共享，大小4KB左右，视浏览器而定
LocalStorage 受同源策略限制，支持多标签页数据共享，存储数据量大概几M，视浏览器而定
SessionStorage 受同源策略限制，单标签页数据，存储数据量大概几M，视浏览器而定
IndexedDB 受同源策略限制，能够存储较大的数据量

通信

websoket 需要一个服务端做中转，可跨源通信
window.postMessage() 一个窗口需要获得另一个窗口的引用，可跨源通信
Web Worker 没能实现多标签页数据共享，不能通过上述存储方式共享数据
window.onstorage 通过LocalStorage存储实现共享

结论

websoket能实现双屏数据共享，从而实现标题的效果，不过因为要写个服务端中转，暂时不考虑此方案。
Web Worker 没能实现多标签页数据共享。
window.postMessage() 可在两窗口之间通信，代码相对简单，不过体验不太好。
相对来讲，在数据量不大的情况下，window.onstorage 和LocalStorage来实现分屏异显更好点

代码

结论3：

//页面1
<body>
    <h1 onclick="openNewWindow()">页面1</h1>
    <button onclick="sendMsg()">发送消息</button>
    <script>
        let newWindow;
        function openNewWindow() {
            newWindow = window.open('b.html', '_blank', 'fullscreen=yes')
        }

        function sendMsg() {
            if (newWindow) {
                newWindow.postMessage('数据', '*');
            }
        }
    </script>
</body>

//页面2
<body>
    <h1>页面2</h1>
    <script>
        window.addEventListener("message", (evt) => {
            if (evt.origin !== "url") {//判断消息源是否可信任

            }
            console.log(evt)
        }, false);
    </script>
</body>

结论4：

//页面1
<body>
	<h1>页面1</h1>
	<script>
		localStorage.setItem("data", "1234")
	</script>
</body>

//页面2
<body>
	<h1>页面2</h1>
	<script>
		window.onstorage = (e) => { console.log(e) }
	</script>
</body>

最后， 除了方案一，三和四只能在同一浏览器中运行。方案一的实现流程可参阅这篇博客