如何实现禁止HTML文件在浏览器多标签页重复打开？

可以通过浏览器的Broadcast Channel API结合localStorage实现这个需求，核心思路是通过标记和跨标签页通信来检测是否已有页面实例，并在重复打开时触发错误提示。

实现步骤 #

1. 页面加载时，检查localStorage中的实例标记，判断是否已有打开的页面。
2. 若标记存在，通过Broadcast Channel发送验证请求，确认是否真的有活跃的页面实例。
3. 收到活跃实例的回应后，立即显示错误提示，可选尝试关闭当前标签页。
4. 若标记不存在，设置实例标记，并监听页面关闭/刷新事件，在页面销毁时清除标记。
5. 监听其他页面的验证请求，及时回应确认自身存在。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单实例页面</title>
</head>
<body>
    <h1>正常内容</h1>
    <script>
        // 创建广播频道，自定义唯一频道名
        const instanceChannel = new BroadcastChannel('single-page-instance');

        window.addEventListener('load', () => {
            const instanceFlag = localStorage.getItem('single-page-active');
            
            if (instanceFlag) {
                // 发送验证请求，确认是否有活跃实例
                instanceChannel.postMessage({ type: 'verify' });
                
                // 设置超时，处理标记残留（如页面意外崩溃）
                const timeout = setTimeout(() => {
                    localStorage.setItem('single-page-active', 'true');
                    setupCleanup();
                }, 1000);

                // 监听活跃实例的回应
                instanceChannel.addEventListener('message', (event) => {
                    if (event.data.type === 'active') {
                        clearTimeout(timeout);
                        // 替换页面内容为错误提示
                        document.body.innerHTML = `
                            <div style="text-align: center; margin-top: 100px;">
                                <h2 style="color: #dc3545;">错误：该页面已在浏览器中打开</h2>
                                <p>请关闭已打开的标签页后重试</p>
                            </div>
                        `;
                        // 部分浏览器可能限制自动关闭，仅作备选
                        setTimeout(() => window.close(), 3000);
                    }
                });
            } else {
                localStorage.setItem('single-page-active', 'true');
                setupCleanup();
                
                // 监听其他页面的验证请求，回复自身活跃状态
                instanceChannel.addEventListener('message', (event) => {
                    if (event.data.type === 'verify') {
                        instanceChannel.postMessage({ type: 'active' });
                    }
                });
            }
        });

        // 页面销毁时清除标记并关闭广播频道
        function setupCleanup() {
            window.addEventListener('beforeunload', () => {
                localStorage.removeItem('single-page-active');
                instanceChannel.close();
            });
        }
    </script>
</body>
</html>

注意事项 #

• 同源限制：该方案基于浏览器的同源策略，若页面通过file://协议本地打开，不同浏览器对localStorage的隔离规则可能不同（如Chrome会按文件路径隔离），建议部署到服务器（http:///https://协议）使用以保证兼容性。
• 标记残留处理：通过广播验证而非仅依赖localStorage标记，可避免页面意外崩溃导致的标记残留问题。
• 自动关闭限制：多数现代浏览器出于安全考虑，不允许脚本自动关闭非脚本打开的标签页，因此错误提示是核心，自动关闭仅作备选。

内容的提问来源于stack exchange，提问作者Tin huynh