查看各浏览器的内核

如果你从事前台开发，那么肯定不能少的就是要熟悉各浏览器的内核，那么我们如何知道各浏览器的内核呢？那就得从window.navigator.userAgent入手了。

首先我们写一个自己的Browser对象。

(function(win){
    var // Useragent RegExp
    rwebkit = /(webkit)[ \/]([\w.]+)/,
    ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
    rmsie = /(msie) ([\w.]+)/,
    rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
    browserMatch,
    Browser = {},
    userAgent = win.navigator.userAgent;
    
    function uaMatch(ua){
        ua = ua.toLowerCase();

        var match = rwebkit.exec( ua ) ||
            ropera.exec( ua ) ||
            rmsie.exec( ua ) ||
            ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||
            [];

        return { browser: match[1] || "", version: match[2] || "0" };
    }
    
    function init()
    {        browserMatch = uaMatch( userAgent );
        if ( browserMatch.browser ) {
            Browser.userAgent = userAgent;
            Browser.type = browserMatch.browser;
            Browser[ browserMatch.browser ] = true;
            Browser.version = browserMatch.version;
        }
    }
    
    init();
    
    Browser.isChromeOrSafari = function(){
        if(Browser.webkit){
            return true;
        }
        return false;
    };
    
    Browser.isFirefox = function(){
        if(Browser.mozilla){
            return true;
        }
        return false;
    };
    
    Browser.isOpera = function(){
        if(Browser.opera){
            return true;
        }
        return false;
    };
    
    Browser.isMSIE = function(){
        if(Browser.msie){
            return true;
        }
        return false;
    };
    
    win.Browser = Browser;
})(window);

下面我们写个页面测试一下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="BrowserType.js"></script>
<script type="text/javascript">
window.print = function(value) {
    document.write(value);
};

window.println = function(value) {
    print(value);
    document.write("<br/>");
};

window.onload = function()
{
    println(Browser.userAgent);
    println(Browser.type + " : " + Browser.version);
    println("IE : " + Browser.isMSIE());
    println("Chrome or Safari : " + Browser.isChromeOrSafari());
    println("Firefox : " + Browser.isFirefox());
    println("Opera : " + Browser.isOpera());
}
</script>
</head>
<body>

</body>
</html>

在IE下输出如下：

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E)
msie : 9.0
IE : true
Chrome or Safari : false
Firefox : false
Opera : false

在firefox下输出如下：

Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0
mozilla : 12.0
IE : false
Chrome or Safari : false
Firefox : true
Opera : false

在Opera下输出如下：

Opera/9.80 (Windows NT 6.1; U; Edition IBIS; zh-cn) Presto/2.10.289 Version/12.00
opera : 12.00
IE : false
Chrome or Safari : false
Firefox : false
Opera : true

在Chrome下输出如下：

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.162 Safari/535.19
webkit : 535.19
IE : false
Chrome or Safari : true
Firefox : false
Opera : false

在Safari下输出如下：

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
webkit : 534.57.2
IE : false
Chrome or Safari : true
Firefox : false
Opera : false

在世界之窗极速版下，输出如下：

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11 QIHU THEWORLD
webkit : 535.11
IE : false
Chrome or Safari : true
Firefox : false
Opera : false

在360极速浏览器输出如下：

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5 QIHU 360EE
webkit : 536.5
IE : false
Chrome or Safari : true
Firefox : false
Opera : false

从以上输出结果，可以看出来，webkit有走红的现象，毕竟速度快才是硬道理啊！

来源：https://www.cnblogs.com/zfc2201/archive/2012/07/17/2596500.html

标签

safari

浏览器内核

mozilla

opera浏览器

webkit

谷歌浏览器