检测不支持的浏览器版本并显示特定的消息div

Question

我在我的网站中有一个聊天机器人，它需要最新版本的浏览器才能完美地工作，因此我需要向用户显示一条消息，提示他们“请更新您的浏览器到最新版本”。我不想使用第三方插件。如何使用这个js代码，在用户使用不支持的浏览器版本时显示一个div。

Html

<div id="printVer"></div>

JS

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 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    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 M.join(' ');
})();
document.getElementById('printVer').innerHTML=navigator.sayswho

- Dhanil

---

用户代理“嗅探”不被认为是准确的——首选选项是使用特性检测……想一想，我使用了哪些“新”的功能……检查它们……如果没有检测到，则执行适当的操作。 - Jaromanda X

阅读一下这篇文章，了解为什么用户代理是一个谬论：https://modernizr.com/docs/#what-is-feature-detection - freedomn-m

在浏览器中更改用户代理也非常容易。当一个全新的“超级浏览器”出现时，你可能没有考虑过它，但它可以与你的代码一起使用，但你的页面却愚蠢地说“更新到最新版本”，而我已经有了“最新”版本，你会每周更新你的代码吗？ - freedomn-m

@freedomn-m 我们主要考虑Chrome（60以上），Firefox（50以上）和IE（11）。使用modenizr检测版本并显示消息是否容易？我对modenizr还不太熟悉，所以想问一下。谢谢。 - Dhanil

不，你完全没有理解这个概念。你说：“这只在浏览器x v.n中有效，所以我需要检查x v.n” - 实际上，你的代码“之所以有效是因为浏览器x v.n具有A功能” - 所以你需要“检查A功能”，然后无论是什么浏览器都可以使用，因为它具有你想要/需要的功能。 - freedomn-m

@freedomn-m 抱歉误导了，我说的是“在浏览器版本 > X 中效果更好”。我不想检查浏览器的功能，也不想为小功能实现整个 modernizr 代码。幸运的是，我找到了一个解决方案，虽然知道这不是最佳实践。请查看我的回答。感谢您及时的支持。 - Dhanil

Answer 1

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 'IE ' + ( tem[1] || '' );
    }
    if ( M[1] === 'Chrome' ) {
        tem = ua.match( /\b(OPR|Edge)\/(\d+)/ );
        if ( tem != null ) return tem.slice( 1 ).join( ' ' ).replace( 'OPR', 'Opera' );
    }
    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 M.join( ' ' );
} )();
//document.getElementById('printVer').innerHTML=navigator.sayswho
var str = navigator.sayswho;
var browser = str.substring( 0, str.indexOf( " " ) );
var version = str.substring( str.indexOf( " " ) );
version = version.trim();
version = parseInt( version );
console.log( browser );
console.log( version );

if ( ( browser == "Chrome" && version < 70 ) || ( browser == "Firefox" && version < 53 ) || ( browser == "Safari" && version < 5 ) || ( browser == "IE" && version < 11 ) || ( browser == "Opera" && version < 52 ) ) {
    $( '#printVer' ).show();
}
else {
    $( '#printVer' ).hide();
}

- Dhanil

---

有没有 JavaScript 包可以在浏览器版本过旧或不受支持时显示警报？ - Dendi Handian

Answer 2

如果您想确定它是否是除支持浏览器之外的任何内容，您可能需要使用jQuery的浏览器检测，类似于：

<script type="text/javascript">
// check if browser is IE6 (when IE) or not FF6 (when FF)
if (($.browser.msie && $.browser.version.substr(0,1) == '6')
    || ($.browser.mozilla && $.browser.version.substr(0,1) != '3')) {
        $('#browserWarning').show();
}
</script>

- Pramod

---

jquery的$.browser在2009年被弃用，并在2013年被移除。[...] - Zoe stands with Ukraine

Answer 3

在这里我不检查操作系统，例如移动设备等等。尝试这个浏览器版本 ==>

( function ( window ) {
    //Get Browser Type
    var browser = {
        /** Define Browser Type*/
        type:/** Whether we are using a IE Browser or not. */
        typeof ( window.attachEvent ) === 'function' && !( Object.prototype.toString.call( window.opera ) == '[object Opera]' )
            ? 'IE'
            /** Whether we are using a Opera Browser or not. */
            : ( Object.prototype.toString.call( window.opera ) == '[object Opera]' || navigator.userAgent.indexOf( 'Opera Mini' ) > -1 )
                ? 'Opera'
                /** Whether we are using a WebKit Type Browser or not. */
                : ( navigator.userAgent.indexOf( 'AppleWebKit/' ) > -1 )
                    ? 'WebKit'
                    /** Whether we are using a Gecko Type Browser or not. */
                    : ( navigator.userAgent.indexOf( 'Gecko' ) > -1 && navigator.userAgent.indexOf( 'KHTML' ) === -1 )
                        ? 'Gecko'
                        /** Whether we are using a Apple Browser or not. */
                        : ( /Apple.*Mobile/.test( navigator.userAgent ) )
                            ? 'MobileSafari'
                            : undefined
    };
    //Get Browser Version
    browser.version = function () {
        let ua; ua = navigator.userAgent;
        return this.type === 'Gecko' ? /** Whether this browser type is Gecko*/function ( a ) {
            let rv = -1, re = new RegExp( "rv:([0-9]{1,}[\.0-9]{0,})" );
            re.exec( ua ) !== null ? rv = parseFloat( RegExp.$1 ) : '';
            if ( ua.indexOf( 'Firefox/' ) > 0 ) { a.name = 'Firefox'; return rv; }
            if ( ua.indexOf( 'Trident/' ) > 0 ) {/** IE > 10*/a.name = 'IE'; return rv; }
            return rv;
        }( this ) : this.type === 'WebKit' ?/** Whether this browser type is WebKit*/ function ( a, b ) {
            let rv = -1, re;
            re = ua.match( /Opera|OPR\/([0-9]+)\./ );
            if ( null !== re ) {
                rv = parseInt( re[1], 10 ); a.name = 'Opera';
                return rv;
            }
            re = ua.match( /Chrom(e|ium)\/([0-9]+)\./ );
            if ( null !== re ) {
                rv = parseInt( re[2], 10 ); a.name = 'Chrome';
                return rv;
            }
            re = /AppleWebKit\/([\d.]+)/.exec( navigator.userAgent );
            if ( null !== re ) {
                rv = parseFloat( re[1] ); a.name = 'Safari';
                return rv;
            }
            return rv;
        }( this ) : this.type === 'IE' ?/** Whether this browser type is IE (IE version < 9)*/ function ( a ) {
            let rv = -1, re;
            re = new RegExp( "MSIE ([0-9]{1,}[\.0-9]{0,})" );
            return re.exec( ua ) !== null ? ( rv = parseFloat( RegExp.$1 ), a.name = 'IE', rv ) : rv;
        }( this ) : this.type === 'Opera' ?/** Whether this browser type is Opera*/ function ( a ) {
            let rv = -1;
            try {
                rv = navigator.userAgent.match( /Version\/([1-9]+\.[0-9]{2})/ )[1]; a.name = 'Opera';
                return rv;
            } catch ( ex ) {
                return rv;
            }
        }( this ) : /** Undefined browser type define*/ -1;
    }.call( browser );

    window.browser = browser;

}( window ) );

检查你的条件 ==>

if ( ( browser.name === 'Chrome' && browser.version <= 60 )
    || ( browser.name === 'IE' && browser.version < 11 )
    || ( browser.name === 'Firefox' && browser.version <= 50 ) ) {
    // Not Supported
} else {
    //Supported or Undefined Browser
}

- Rajib Chy