如何通过原生JS检测不兼容浏览器版本并显示更新提示Div

Got it, let's walk through how to make this work without any third-party plugins. Here's a step-by-step implementation using your existing HTML and the browser detection code snippet:

Step 1: Complete the Browser Detection Function #

First, let's finish that navigator.sayswho function—it parses the user agent string to get the browser name and major version. Here's the full working version:

navigator.sayswho = (function() {
    var ua = navigator.userAgent, tem,
        M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return { name: 'IE', version: (tem[1] || '') };
    }
    if (M[1] === 'Chrome') {
        tem = ua.match(/\bEdg\/(\d+)/);
        if (tem != null) { return { name: 'Edge', version: tem[1] }; }
    }
    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
    if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
    return {
        name: M[0],
        version: parseInt(M[1], 10)
    };
})();

This returns an object with name (e.g., "Chrome", "Firefox", "Safari") and version (the major version as an integer).

Step 2: Add CSS to Hide the Prompt by Default #

We want the #printVer div hidden until we confirm the browser is incompatible. Add this CSS to your page:

#printVer {
    display: none;
    padding: 1rem;
    background-color: #ffeeee;
    border: 1px solid #ff5555;
    border-radius: 4px;
    margin: 1rem 0;
    text-align: center;
    font-size: 1.1rem;
}

Step 3: Write the Compatibility Check Logic #

Define minimum required versions for each browser (tweak these to match your chatbot's actual needs), then check if the user's browser falls below them. If it does, show the prompt:

// Define minimum required versions for each browser
const minimumVersions = {
    Chrome: 100,
    Firefox: 95,
    Safari: 15,
    Edge: 100,
    IE: Infinity // Mark IE as fully incompatible
};

// Get user's browser info
const userBrowser = navigator.sayswho;

// Check if browser is incompatible
const isIncompatible = () => {
    // If browser isn't in our list, assume incompatible
    if (!minimumVersions.hasOwnProperty(userBrowser.name)) {
        return true;
    }
    // Compare version numbers
    return userBrowser.version < minimumVersions[userBrowser.name];
};

// Show the prompt if incompatible
if (isIncompatible()) {
    const promptDiv = document.getElementById('printVer');
    promptDiv.textContent = "请将您的浏览器更新至最新版本";
    promptDiv.style.display = 'block';
}

Step 4: Full Integrated Code #

Here's everything put together with your HTML:

<!DOCTYPE html>
<html>
<head>
    <style>
        #printVer {
            display: none;
            padding: 1rem;
            background-color: #ffeeee;
            border: 1px solid #ff5555;
            border-radius: 4px;
            margin: 1rem 0;
            text-align: center;
            font-size: 1.1rem;
        }
    </style>
</head>
<body>
    <!-- Your existing website content here -->
    <div id="printVer"></div>

    <script>
        navigator.sayswho = (function() {
            var ua = navigator.userAgent, tem,
                M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
            if (/trident/i.test(M[1])) {
                tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
                return { name: 'IE', version: (tem[1] || '') };
            }
            if (M[1] === 'Chrome') {
                tem = ua.match(/\bEdg\/(\d+)/);
                if (tem != null) { return { name: 'Edge', version: tem[1] }; }
            }
            M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
            if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
            return {
                name: M[0],
                version: parseInt(M[1], 10)
            };
        })();

        const minimumVersions = {
            Chrome: 100,
            Firefox: 95,
            Safari: 15,
            Edge: 100,
            IE: Infinity
        };

        const userBrowser = navigator.sayswho;

        const isIncompatible = () => {
            if (!minimumVersions.hasOwnProperty(userBrowser.name)) {
                return true;
            }
            return userBrowser.version < minimumVersions[userBrowser.name];
        };

        if (isIncompatible()) {
            const promptDiv = document.getElementById('printVer');
            promptDiv.textContent = "请将您的浏览器更新至最新版本";
            promptDiv.style.display = 'block';
        }
    </script>
</body>
</html>

How It Works: #

• The navigator.sayswho function accurately identifies the browser and its major version.
• We set version thresholds for modern browsers (adjust these numbers based on your chatbot's compatibility needs).
• If the user's browser is below the threshold or isn't in our list, we show the #printVer div with your update message.

This uses only vanilla HTML/CSS/JS—no third-party tools required.

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