JavaScript跨浏览器兼容性问题：标签页重复检测脚本适配咨询

Great question! Let's break down the compatibility gaps in your original script and fix them step by step to work reliably across all modern browsers (and even older ones like IE10+):

1. window.location.origin isn't supported in older browsers #

IE10 and earlier don't include the location.origin property, which will break your base URL logic. We'll add a fallback to construct the base URL manually for these cases:

function getBaseUrl() {
    if (window.location.origin) {
        return window.location.origin;
    }
    // Fallback for IE10 and below
    return window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
}

2. localStorage can throw errors in private/incognito modes #

Browsers like Safari (private mode) and older Chrome versions block localStorage access entirely, throwing an error instead of returning null. We need to wrap all storage operations in a try-catch block to handle this gracefully.

3. onbeforeunload behavior varies across browsers #

While your current cleanup handler works in most cases, some browsers require the handler to return a string (even empty) to trigger properly. We'll adjust this for consistency.

Updated Cross-Browser Compatible Script #

<script type="text/javascript">
(function() {
    // Helper to get base URL with fallback for older IE
    function getBaseUrl() {
        if (window.location.origin) {
            return window.location.origin;
        }
        return window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
    }

    let isStorageAvailable = true;
    try {
        // Test if localStorage is accessible (avoids errors in private modes)
        localStorage.setItem('storageTest', 'test');
        localStorage.removeItem('storageTest');
    } catch (e) {
        isStorageAvailable = false;
        console.warn('LocalStorage is unavailable, tab duplication detection will not function.');
    }

    if (isStorageAvailable) {
        const targetRedirectUrl = getBaseUrl() + '/path/to/your/url';
        
        if (localStorage.getItem('openpages')) {
            alert('You have opened this already in a tab!');
            window.location.href = targetRedirectUrl;
        } else {
            localStorage.setItem('openpages', '1');
            
            // Clean up localStorage when page is closed/refreshed
            window.onbeforeunload = function() {
                localStorage.removeItem('openpages');
                // Return empty string for cross-browser compatibility
                return '';
            };
        }
    }
})();
</script>

Key Improvements: #

• Robust base URL: Uses modern location.origin where available, falls back to manual URL construction for legacy browsers.
• Error-safe storage: Wraps all localStorage operations in try-catch to handle restricted environments like private browsing.
• Cleaner cleanup: Uses localStorage.removeItem() instead of setting an empty string, and adds a return value to onbeforeunload for better browser support.
• Encapsulated code: Wrapped in an IIFE to avoid polluting the global scope.

Quick Note: #

Keep in mind localStorage is shared across all tabs of the same origin. If you need detection for the exact same URL (not just same origin), modify the script to store the full page URL instead of a generic '1' and compare it on page load.

内容的提问来源于stack exchange，提问作者Attila Naghi