經過瀏覽器navigator判斷瀏覽器版本或者手機類型&&判斷微信訪問

javascript 的navigator屬性，不經常使用，可是用處也很多，主要用處是在作瀏覽器兼容的問題的時候，如今有的網站已經不兼容IE6，用戶假如用IE6瀏覽網頁的話，會提示瀏覽器升級等信息。或者判斷是手機用戶仍是電腦用戶，手機用戶調整至手機網站，電腦用戶之間跳轉至電腦網頁等等。

首先咱們來談談navigator屬性。

你能夠在本身電腦上，用複製以下信息，運行一下，看看：

var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("<br />");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("<br />");
document.write("Name=" + x.appName);
document.write("<br />");
document.write("Version=" + x.appVersion);
document.write("<br />");
document.write("CookieEnabled=" + x.cookieEnabled);
document.write("<br />");
document.write("CPUClass=" + x.cpuClass);
document.write("<br />");
document.write("OnLine=" + x.onLine);
document.write("<br />");
document.write("Platform=" + x.platform);
document.write("<br />");
document.write("UA=" + x.userAgent);
document.write("<br />");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("<br />");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("<br />");
document.write("UserLanguage=" + x.userLanguage);

個人電腦的運行結果以下：

CodeName=Mozilla
MinorVersion=undefined
Name=Netscape
Version=5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
CookieEnabled=true
CPUClass=undefined
OnLine=true
Platform=Win32
UA=Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
BrowserLanguage=undefined
SystemLanguage=undefined
UserLanguage=undefined

對照一下便可一目瞭然。

根據上面的navigator屬性，咱們能夠來判斷瀏覽器版本了，下面咱們一塊兒來作一個例子：

頁面在IE7一下，提示瀏覽器升級，其餘瀏覽器正常瀏覽

能夠寫以下代碼：

if(window.ActiveXObject)
    {
        var browser=navigator.appName 
        var b_version=navigator.appVersion 
        var version=b_version.split(";"); 
        var trim_Version=version[1].replace(/[ ]/g,""); 
      if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0"  || trim_Version=="MSIE7.0" ) 
        { 
        $(".ie7andie6").show();
        $(".contentnone").hide();
        } 
   }

html咱們能夠這麼寫：

  <div class="contentnone" style="margin-top:30px;text-align: center;font-size:18px;">各位親們，你們好，我在IE8以上能夠正常瀏覽啊！</div>

   <div class="ie7andie6 mod-main" style="display:none;">
    <div class=tip>
      <p>您使用的瀏覽器版本較低，建議您換用下面這些瀏覽器試試吧。</p>
    </div>
    <ul class="clr mod-browsers">
        <li><A class=chrome href="http://www.google.cn/intl/zh-CN/chrome/" target=_blank>Chrome</A> </li>
        <li><A class=ie href="http://windows.microsoft.com/zh-cn/internet-explorer/ie-10-worldwide-languages" target=_blank>IE10</A> </li>
        <li><A class=ff href="http://firefox.com.cn/" target=_blank>Firefox</A> </li>
    </ul>
    <div class=switch-pic></div>
</div>

IE8及其別的版本就能夠正常瀏覽了！

另外你也能夠用這個方法來判斷是手機端用戶仍是電腦用戶：

var a=navigator.userAgent;
if(a.indexOf("Android")!=-1 || a.indexOf("iPhone")!=-1 || a.indexOf("iPad")!=-1 ){

             //跳轉到手機網站

}
//tips: 也能夠用try catch 對手機特有的touch事件監測，若是支持這些事件就能夠跳轉到H5頁面;

　

js 判斷安卓或者ios 之indexOf方式:

//判斷訪問終端
var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE內核
            presto: u.indexOf('Presto') > -1, //opera內核
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否爲移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器
            iPhone: u.indexOf('iPhone') > -1 , //是否爲iPhone或者QQHD瀏覽器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web應該程序，沒有頭部與底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

使用方法：

//判斷是否IE內核
if(browser.versions.trident){ alert("is IE"); }
//判斷是否webKit內核
if(browser.versions.webKit){ alert("is webKit"); }
//判斷是否移動端
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移動端"); }

js 判斷安卓或者ios 之正則表達式方式:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
   //蘋果端
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    //安卓端
} else {
   //pc端
};

 

js 判斷微信訪問頁面:

var ua= navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
	 alert("is wechat");
}