JS 获取浏览器内核

JavaScript015

JS 获取浏览器内核,第1张

var explorer = window.navigator.userAgent

//ie 

if (explorer.indexOf("MSIE") >= 0) {

    alert("ie")

}

//firefox 

else if (explorer.indexOf("Firefox") >= 0) {

    alert("Firefox")

}

//Chrome

else if(explorer.indexOf("Chrome") >= 0){

    alert("Chrome")

}

//Opera

else if(explorer.indexOf("Opera") >= 0){

    alert("Opera")

}

//Safari

else if(explorer.indexOf("Safari") >= 0){

    alert("Safari")

}

一个完整的浏览器包含浏览器内核和浏览器的外壳,浏览器内核又可以分为两部分:渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎。

浏览器的构成:一般由7个模块组成:User Interface(用户界面)、Browser engine(浏览器引擎)、Rendering engine(渲染引擎)、Networking(网络)、JavaScript Interpreter(js解释器)、UI Backend(UI后端)、Date Persistence(数据持久化存储)

用户界面:包括地址栏、后退/前进按钮、书签目录等,也就是所看到的除了页面显示窗口之外的其他部分。

浏览器引擎:可以在用户面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等,是浏览器中各个部分之间相互通信的核心。

渲染引擎:解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面,也有人称之为排版引擎,我们常说的浏览器内核主要指的就是渲染引擎。

网络:用来完成网络调用或资源下载的模块。

UI后端:用来绘制基本的浏览器窗口内控件,如输入框、按钮、单选按钮等,根据浏览器不同绘制的视觉效果也不同,但功能都是一样的。

JS解释器:用来解释执行JS脚本的模块,如V8引擎,JavaScriptCore

数据存储:浏览器在硬盘中保存cookie、localStorage等各种数据,可通过浏览器引擎提供的API进行调用。

主流浏览器的内核

Trident(IE内核)

Trident内核代表产品Internet Explorer,是微软开发的一种排版引擎。

Gecko(Firefox 火狐)

Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的,以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。

Webkit(Safari)

苹果公司自己的内核,也是Safari浏览器的内核。Webkit内核代表作品Safari 、Chromewebkit是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,

主要用于Mac IOS系统,特点在于源码结构清晰,渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示,主要代表作品有Safari和Google。

Presto(Opera)

Presto内核代表作品OperaPresto是由OperaSoftware开发的浏览器排版引擎,供Opera7.0及以上使用,它取代了旧版Opera4至6版本使用的Elektra排版引擎,包括加入动态功能,

例如网页或其部分可随着DOM及Script语法的事件而重新排版。

Blink(Chrome)

有Google和Opera Software挨罚的浏览器排版引擎,2013年4月发布,现在Chrome内核是Blink。Blink其实是webkit的分支,大部分国产浏览器最新版都采用Blink内核。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有Webkit、Blink、Trident、Gecko,其中苹果iOS平台主要是Webkit,Android4.4之前Android系统浏览器的内核是Webkit,Android4.4之后使用Blink,Windows Phone8系统浏览器内核是Trident。

主要用到navigator.userAgent

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<script type="text/javascript">

function myBrowser(){

var userAgent = navigator.userAgent//取得浏览器的userAgent字符串

console.log(userAgent)

var isOpera = userAgent.indexOf("Opera") >-1

if (isOpera) {

return "Opera"

}//判断是否Opera浏览器

if (userAgent.indexOf("Firefox") >-1) {

return "FF"

} //判断是否Firefox浏览器

if (userAgent.indexOf("Chrome") >-1){

return "Chrome"

}

if (userAgent.indexOf("compatible") >-1 &&userAgent.indexOf("MSIE") >-1 &&!isOpera) {

return "IE"

}//判断是否IE浏览器

}

var cc = myBrowser()

if(cc == "Chrome"){

alert("当前是Chrome浏览器")

}

if(cc == "IE"){

alert("当前是IE浏览器")

}

</script>

</body>

</html>