判斷頁面由什麼瀏覽器開啟(js)
阿新 • • 發佈:2021-06-22
有時頁面需要根據不同的裝置進行不同的處理,需要判斷到底是哪種裝置打開了頁面。
瀏覽器檢測
移動終端瀏覽器版本資訊:
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 }