JavaScript瀏覽器檢測之navigator 對象

1、使用客戶端檢測的緣由

　　因爲每一個瀏覽器都具備本身獨到的擴展，因此在開發階段來判斷瀏覽器是一個很是重要的步驟。

　　雖然瀏覽器開發商在公共接口方面投入了不少精力，努力的去支持最經常使用的公共功能；

　　但在現實中，瀏覽器之間的差別，以及不一樣瀏覽器的「怪癖」倒是很是多的，所以客戶端檢測除了是一種補救措施，更是一種行之有效的開發策略。

 

 

2、navigator 對象概述

　　navigator 對象最先由 Netscape Navigator2.0 引入的 navigator 對象，如今已經成爲識別客戶端瀏覽器的事實標準。

　　與以前的 BOM 對象同樣，每一個瀏覽器中 的 navigator 對象也都有一套本身的屬性。

alert(window.navigator);//navigator對象是window對象下的

　　

　　一、瀏覽器及版本號:

　　　　不一樣的瀏覽器支持的功能、屬性和方法各有不一樣。好比 IE 和 Firefox 顯示的頁面可能就會有所略微不一樣。

alert('瀏覽器名稱：' + navigator.appName);//瀏覽器名稱：Netscape     這個屬性不能精確的取到瀏覽器的名稱

alert('瀏覽器用戶代理字符串：' + navigator.userAgent);//表示的是瀏覽器信息的東西   瀏覽器用戶代理字符串：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0

alert('瀏覽器所在的系統：' + navigator.platform);//只是單純的檢測出是什麼平臺，檢測不出win7仍是winxp等等

alert('瀏覽器版本：' + navigator.appVersion);

 

　　二、瀏覽器嗅探器

　　　　瀏覽器嗅探器是一段程序，有了它，瀏覽器檢測就變得簡單了。

　　　　咱們這裏提供了一個browserdetect.js 文件，用於判斷瀏覽器的名稱、版本號及操做系統。

　　　　browserdetect.js ：（瀏覽器探測器——瀏覽器名稱，瀏覽器版本，瀏覽器所在的操做系統）

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Internet Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

　　　　 

<script type="text/javascript" src="browserdetect.js"></script>
<script type="text/javascript">
    alert(BrowserDetect.browser);
    alert(BrowserDetect.version);
    alert(BrowserDetect.OS);
    //給IE7如下的瀏覽器作特殊處理
    if(BrowserDetect.browser=='Interent Explorer' && BrowserDelect.version < 7){
        alert("須要作IE低版本的兼容");
    }
</script>

 

　　三、檢測插件

　　　　IE瀏覽器不能用，由於IE瀏覽器沒有插件
　　　　插件是一類特殊的程序。他能夠擴展瀏覽器的功能，經過下載安裝完成。

　　　　好比，在線音樂、視頻動畫等等插件。navigator 對象的 plugins 屬性，這是一個數組。存儲在瀏覽器已安裝插件的完整列表。
　　　　

    //列出全部的插件名
    for (var i = 0; i < navigator.plugins.length; i ++) {
        document.write(navigator.plugins[i].name + '<br />');
        document.write(navigator.plugins[i].filename + '<br />');
        document.write(navigator.plugins[i].description + '<br />');
        document.write('<br />');
    }

 　　　　定義一個功能用於判斷某插件是否存在（非IE瀏覽器插件）

    function hasPlugin(name) {
        var name = name.toLowerCase();
        for (var i = 0; i < navigator.plugins.length; i ++) {
            if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                return true;
            }
        }
        return false;
    }
    alert(hasPlugin('Flash')); //檢測 Flash 是否存在
    alert(hasPlugin('java')) //檢測 Java 是否存在

 

　　四、ActiveX:

　　　　IE 瀏覽器沒有插件，但提供了 ActiveX 控件。

　　　　ActiveX 控件一種在 Web 頁面中嵌入對象或組件的方法。

　　　　因爲在 JS 中，咱們沒法把全部已安裝的 ActiveX 控件遍歷出來，但咱們仍是能夠去驗證是否安裝了此控件。

    //檢測 IE 中的控件
    function hasIEPlugin(name) {
        try {
            new ActiveXObject(name);//這裏的name必須是控件的惟一標識符id（每一個控件都有它的惟一標識符）
            return true;
        } catch (e) {
            return false;
        }
    }
    //檢測 Flash（傳入的是Flash控件的標識符）
    alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));

　　　　ShockwaveFlash.ShockwaveFlash 是 IE 中表明 FLASH 的標識符，你須要檢查哪一種控件，必須先獲取它的標識符。

　　五、跨瀏覽器檢測是否支持 Flash

    //檢測非IE的
    function hasPlugin(name) {
        var name = name.toLowerCase();
        for (var i = 0; i < navigator.plugins.length; i ++) {
            if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                return true;
            }
        }
        return false;
    }

    //檢測 IE 中的控件
    function hasIEPlugin(name) {
        try {
            new ActiveXObject(name);//這裏的name必須是控件的惟一標識符id（每一個控件都有它的惟一標識符）
            return true;
        } catch (e) {
            return false;
        }
    }
    
    //跨瀏覽器
    function hasFlash() {
        var result = hasPlugin('Flash');  //若是返回true，說明檢測到了，而且不是IE瀏覽器，若是沒有檢測到 說明這個瀏覽器沒有Flash插件，或者他多是IE瀏覽器
        if (!result) {
            result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
        }
        return result;
    }
    //檢測 Flash
    alert(hasFlash());

 

　　六、MIME 類型
　　　　MIME 是指多用途因特網郵件擴展。它是經過因特網發送郵件消息的標準格式。

　　　　如今也被用於在因特網中交換各類類型的文件。PS：mimeType[]數組在 IE 中不產生輸出。
　　　　

    //遍歷非 IE 下全部 MIME 類型信息
    for (var i = 0; i < navigator.mimeTypes.length; i++) {
        if (navigator.mimeTypes[i].enabledPlugin != null) {document.write('<dl>');
            document.write('<dd>類型名稱：' + navigator.mimeTypes[i].type + '</dd>');
            document.write('<dd>類型引用：' + navigator.mimeTypes[i].enabledPlugin.name +'</dd>');
            document.write('<dd>類型描述：' + navigator.mimeTypes[i].description + '</dd>');
            document.write('<dd>類型後綴：' + navigator.mimeTypes[i].suffixes + '</dd>');
            document.write('</dl>')
        }
    }