如何判斷chrome瀏覽器

1.背景

    有好多瀏覽器使用了chrome內核,比如opera和很多國產瀏覽器。因此它們的userAgent中就會出現 ‘chrome’ 的字樣。這樣根據userAgent判斷時就要先判斷是否有其他瀏覽器標誌。

2.說明

判斷是否是chrome瀏覽器採用黑名單的方式。即判斷ua是否有chrome標識,然後剔除使用chrome內核的非chrome瀏覽器。那麼如何判斷一個使用chrome內核的瀏覽器是不是chrome呢?

    大部分瀏覽器的ua裏都有自己的標誌,如:

‘opera’或 ‘OPR’  // opera

'ubrowser', // UC

'taobrowser', // 淘寶

'lbbrowser', // 獵豹

'qqbrowser', // QQ

'maxthon', // 遨遊

'bidubrowser' // 百度

    ua中有上述標識的,可以列入黑名單

    但是有兩個瀏覽器(目前發現),最新版本中的ua裏,沒有加自己的標識,就是360和搜狗。這兩個瀏覽器需要通過navigator.mimeTypes來判斷。360的navigator.mimeTypes[0].type爲 ‘application/vnd.chromium.remoting-viewer’,搜狗的navigator.mimeTypes[1].type爲 ‘application/sogou-native-widget-plugin’。這兩個標識都是chrome沒有的,因此可以通過這個標識將這兩個瀏覽器與chrome區分。由於不知道是這兩個標識一定存在於navigator.mimeTypes的固定位置,因此最好遍歷navigator.mimeTypes,如果存在這兩個標識,就判定爲非chrome。

3.代碼

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
        var markList = [
        'ubrowser', // UC
        'taobrowser', // 淘寶
        'lbbrowser', // 獵豹
        'qqbrowser', // QQ
        'maxthon', // 遨遊
        'bidubrowser' // 百度
    ];

    var mimeTypeList = [
        'application/vnd.chromium.remoting-viewer', // 360
        'application/sogou-native-widget-plugin' // 搜狗
    ]

    function isChrome() {
        var ua = navigator.userAgent.toLowerCase();
        var mimeTypes = navigator.mimeTypes;
        return (ua.indexOf('chrome') !== -1)
            && !hasOtherMark(ua)
            && !isInMimeList(mimeTypes);
    }

    function hasOtherMark(ua) {
        var flag = false;
        $.each(
            markList,
            function (index, item) {
                if (ua.indexOf(item) !== -1) {
                    flag = true;
                    return false;
                }
            }
        );
        return flag;
    }

    function isInMimeList(mimeTypes) {
        var flag = false;
        while (mimeTypeList.length) {
            if (flag) {
                return flag;
            }
            var mimeType = mimeTypeList.pop();
            $.each(
                mimeTypes,
                function (index, item) {
                    if (item.type.toLowerCase() === mimeType) {
                        flag = true;
                        return false;
                    }
                }
            );
        }
        return flag;
    }
    alert('browser is chrome: ' + isChrome())
</script>
</html>


發佈了59 篇原創文章 · 獲贊 42 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章