偵測瀏覽器的簡易方法

網路充斥各種不同種類的瀏覽器,這些瀏覽器對 HTML5 的支援並不一致,因此你必須撰寫偵測瀏覽器的程式碼以確認寫出來的功能,可以讓使用者在不同的瀏覽器獲得一致的體驗。
偵測瀏覽器並不困難,我們可以透過 navigator 引用 userAgent 屬性,可以取得與目前使用者瀏覽器種類有關的標頭字串資訊:

navigator.userAgent

在不同的瀏覽器,這段程式碼會輸出不同的結果字串,以下是 Chrome 的畫面:


以下是 Firefox 的畫面:


其它的瀏覽器請讀者自行比較,我們可以透過擷取此段字串來判斷使用者目瀏覽網頁所使用的瀏覽器。以下是測試網頁的範例程式:

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <script>
        window.onload = function () {
            var ua = (/Firefox/i.test(navigator.userAgent)) ? 'Firefox' :
             (/Chrome/i.test(navigator.userAgent)) ? 'Chrome' :
             (/MSIE/i.test(navigator.userAgent)) ? 'IE' :
' Firefox/Chrom/IE 瀏覽器';
            document.getElementById('msg').innerHTML = ua;
        }      
    </script>
</head>
<body>   
    <div id="msg" style="height:120px;width:420px;"  > 
    </div>  
</body>
</html>

其中以粗體標示的部份,利用正規運算式的 test() 方法,比對 navigator.userAgent 回傳的字串,是否包含相關瀏覽器的關鍵字。最後將取得的關鍵字解析結果輸出於畫面中。以下是 Chrome 的畫面:


以下是 Firefox 的測試畫面:

沒有留言: