1. 程式人生 > 其它 >判斷頁面由什麼瀏覽器開啟(js)

判斷頁面由什麼瀏覽器開啟(js)

有時頁面需要根據不同的裝置進行不同的處理,需要判斷到底是哪種裝置打開了頁面。

瀏覽器檢測

移動終端瀏覽器版本資訊:

 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     var ua = navigator.userAgent.toLowerCase();//獲取判斷用的物件
 3     if (ua.match(/MicroMessenger/i) == "micromessenger") {
 4         //在微信中開啟
 5         if(browser.versions.android){
 6             alert('weixin-android')
 7         }
 8         if(browser.versions.ios){
 9             alert('weixin-ios')
10         }
11     }else if(browser.versions.ios) {
12         //在IOS瀏覽器開啟
13         alert('ios-browser')
14     }else if(browser.versions.android){
15         //在安卓瀏覽器開啟
16         alert('android-browser')
17     }
18 } else {
19     //否則就是PC瀏覽器開啟
20     var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串
21     var isOpera = userAgent.indexOf("Opera") > -1;
22     if (isOpera) {
23         alert("Opera")
24     } //判斷是否Opera瀏覽器
25     if (userAgent.indexOf("Firefox") > -1) {
26         alert("FF")
27     } //判斷是否Firefox瀏覽器
28     if (userAgent.indexOf("Chrome") > -1){
29         alert("Chrome")
30     }
31     if (userAgent.indexOf("Safari") > -1) {
32         alert("Safari")
33     } //判斷是否Safari瀏覽器
34     if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
35         alert("IE")
36     } //判斷是否IE瀏覽器
37 }

拓展

微信內部支付,獲取code:

 1 if (browser.versions.mobile) {//判斷是否是移動裝置開啟。browser程式碼在下面
 2     var ua = navigator.userAgent.toLowerCase();//獲取判斷用的物件
 3     if (ua.match(/MicroMessenger/i) == "micromessenger") {
 4         var code = this.getUrlParam('code'); // 擷取路徑中的code
 5         if (code == null || code === '') {
 6             var local = window.location.href;
 7             window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
 8         }
 9     }
10 }
11 
12 //獲取URL中的屬性
13 function getUrlParam(name) {
14     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
15     var url = window.location.href.split('#')[0];
16     var search = url.split('?')[1];
17     if (search) {
18         var r = search.substr(0).match(reg);
19         if (r !== null)
20             return unescape(r[2]);
21         return null
22     } else
23         return null
24 }