Navigator object contains information about the browser.
Many times we need to determine which web browsers and platforms, Navigator offers convenience for us
Navigator common object properties as follows:
| Attributes | description |
|---|---|
| appCodeName | Return code name of the browser. |
| appMinorVersion | Returns the secondary version of the browser. |
| appName | Returns the name of the browser. |
| appVersion | Returns the platform and version information of the browser. |
| browserLanguage | Returns the current language of the browser. |
| cookieEnabled | Returns a Boolean value indicating whether the browser to enable cookie. |
| cpuClass | Returns the CPU level browser system. |
| onLine | Returns a Boolean value that indicates whether the system is in offline mode. |
| platform | Return to the operating system platform running the browser. |
| systemLanguage | Returns the default language of the OS used. |
| userAgent | The return value of the user-agent header sent by the client server. |
| userLanguage | Returns the natural language setting of the OS. |
We use more of his userAgent, the situation often need to determine are:
(1) PC or mobile end
(2) Android or IOS
Type (3) browsers
Sample code:
. 1 var Browser = {
2 versions: function () {
. 3 var U = the navigator.userAgent, App = of navigator.appVersion;
. 4 return { // mobile terminal browser version information
. 5 Trident: u.indexOf ( 'Trident')> - . 1, // IEs core
. 6 Presto: u.indexOf ( 'Presto')> -1, // Opera kernel
. 7 WebKit: u.indexOf ( 'AppleWebKit')> -1, // Apple, Google kernel
. 8 Gecko: U .indexOf ( 'Gecko')> -1 && u.indexOf ( 'KHTML') == -1,// Firefox kernel
9 Mobile: !! u.match (/AppleWebKit.*Mobile * /.), // whether the mobile terminal
10 iOS: !! u.match (/ \ (I [^;] +; (the U-;) the CPU?. the Mac the OS X-+ /), // iOS terminal
. 11 Android: u.indexOf ( 'the Android')> -1 || u.indexOf ( 'the Linux')> -1, // Android or uc browser terminal
12 is the iPhone: u.indexOf ( 'iPhone')> -1, // whether or QQHD iPhone browser
13 is the iPad: u.indexOf ( 'the iPad')> -1, // whether the iPad
14 webApp: u.indexOf ( 'Safari' ) == -1 // if the web application should not head portion and the bottom
15 };
16 } (),
17 language:(navigator.browserLanguage || navigator.language).toLowerCase()
18 }
Determining whether the mobile terminal
. 1 IF (browser.versions.mobile) {
2 the console.log ( 'I is a mobile terminal' );
3 }
It may also be determined in another way
. 1 var S = document.hasOwnProperty ( "ontouchstart"); // computer returns false, handsets to true
2 the console.log (S);
Android or IOS judgment
. 1 IF (browser.versions.ios) {
2 the console.log ( 'I am the IOS' );
. 3 }
. 4 IF (browser.version.andriod) {
. 5 the console.log ( 'I Andrews' );
6 }
Determine the type of browser
1 if(browser.versions.trident){
2 console.log('我是IE');
3 }
4 if(browser.versions.presto){
5 console.log('我是opera');
6 }
7 if(browser.versions.webKit){
8 console.log('我是苹果和谷歌');
9 }
10 if(browser.versions.gecko){
11 console.log('我是火狐');
12 }
Navigator 对象包含有关浏览器的信息。
很多时候我们需要在判断网页所处的浏览器和平台，Navigator为我们提供了便利
Navigator常见的对象属性如下：
| 属性 | 描述 |
|---|---|
| appCodeName | 返回浏览器的代码名。 |
| appMinorVersion | 返回浏览器的次级版本。 |
| appName | 返回浏览器的名称。 |
| appVersion | 返回浏览器的平台和版本信息。 |
| browserLanguage | 返回当前浏览器的语言。 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值。 |
| cpuClass | 返回浏览器系统的 CPU 等级。 |
| onLine | 返回指明系统是否处于脱机模式的布尔值。 |
| platform | 返回运行浏览器的操作系统平台。 |
| systemLanguage | 返回 OS 使用的默认语言。 |
| userAgent | 返回由客户机发送服务器的 user-agent 头部的值。 |
| userLanguage | 返回 OS 的自然语言设置。 |
我们使用的比较多的是他的userAgent，经常需要判断的情况有：
（1）PC还是移动端
（2）安卓还是IOS
（3）浏览器的类型
示例代码：
1 var browser={
2 versions:function(){
3 var u = navigator.userAgent, app = navigator.appVersion;
4 return { //移动终端浏览器版本信息
5 trident: u.indexOf('Trident') > -1, //IE内核
6 presto: u.indexOf('Presto') > -1, //opera内核
7 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
8 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
9 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
10 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
11 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
12 iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
13 iPad: u.indexOf('iPad') > -1, //是否iPad
14 webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
15 };
16 }(),
17 language:(navigator.browserLanguage || navigator.language).toLowerCase()
18 }
判断是否移动端
1 if(browser.versions.mobile){
2 console.log('我是移动端');
3 }
还可以用另一种方式判断
1 var s=document.hasOwnProperty("ontouchstart");//电脑返回false，手机为true
2 console.log(s);
判断安卓还是IOS
1 if(browser.versions.ios){
2 console.log('我是IOS');
3 }
4 if(browser.version.andriod){
5 console.log('我是安卓');
6 }
判断浏览器的类型
. 1 IF (browser.versions.trident) {
2 the console.log ( 'I IEs' );
. 3 }
. 4 IF (browser.versions.presto) {
. 5 the console.log ( 'I Opera' );
. 6 }
. 7 IF (browser.versions.webKit) {
. 8 the console.log ( 'I apples and Google' );
. 9 }
10 IF (browser.versions.gecko) {
. 11 the console.log ( 'I Firefox' );
12 }