案例1：判斷移動終端類型，微信掃描二維碼鏈接可以區分華爲（榮耀）、安卓、蘋果手機。華爲及榮耀會跳到華爲應用商店、安卓會提示瀏覽器打開、蘋果跳到蘋果商店。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>投教基地移動終端信息</title> <style> body { margin: 0; /* 去除頁面默認的外邊距 */ padding: 0; /* 去除頁面默認的內邊距 */ background-image: url('./bg.jpg'); /* 設置背景圖的URL */ background-size: cover; /* 背景圖覆蓋整個頁面 */ background-repeat: no-repeat; /* 背景圖不重複 */ background-color: #ff5b5b; } #user_agent{ float:right; } </style> </head> <body> <div id="user_agent"><img decoding="async" src="./open.png" alt="請在右上角瀏覽器中打開" ></div> <script type="text/javascript"> var user_agent = window.document.getElementById("user_agent"); 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/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否爲移動終端 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 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器 iPad: u.indexOf('iPad') > -1, //是否iPad HUAWEI: u.indexOf('HUAWEI') > -1 || u.indexOf('HarmonyOS') > -1|| u.indexOf('HONOR') > -1, //是否爲huawei XIAOMI: u.indexOf('MI') > -1 || u.indexOf('redmi') > -1, //是否爲小米 webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部 }; } (), language: (navigator.browserLanguage || navigator.language).toLowerCase() } if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {//蘋果版 window.location.href = "https://itunes.apple.com/cn/app/id1628504846?mt=8"; } if (browser.versions.android) {//安卓和華爲 if (browser.versions.HUAWEI) {//華爲 window.location.href = "https://url.cloud.huawei.com/nonmWB0rew"; //is_weixn();//微信不自動跳轉瀏覽器 }else{ window.location.href = "https://tjjd-common-1304488676.cos.ap-beijing.myqcloud.com/download/Android/app-tjjd.apk"; } } is_weixn(); // 是否爲微信 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)!="micromessenger" ) { //非微信隱藏提示 user_agent.style.display = "none"; } else { //alert('請在右上角瀏覽器中打開下載'); //user_agent.innerHTML = '請在右上角瀏覽器中打開下載'; //user_agent.style.display = "block";//小米手機失效 } } </script> </body> </html>
案例2：查看設備信息，用 window.navigator對象測試：
<!DOCTYPE html> <html lang="zh-CN" version="4"> <head> <meta charset="utf-8"> </head> <body> <h1>window.navigator對象測試：</h1> 手機<p id="user_agent"></p> <script> document.write("返回當前瀏覽器的內部名稱（開發代號）navigator.appCodeName：" + navigator.appCodeName + "<br>"); document.write("返回獲取瀏覽器的輔版本號，常用於瀏覽器的補丁貨服務包。navigator.appMinorVersion：" + navigator.appMinorVersion + "<br>"); document.write("返回瀏覽器的官方名稱navigator.appName：" + navigator.appName + "<br>"); document.write("返回瀏覽器的平臺和版本信息navigator.appVersion：" + navigator.appVersion + "<br>"); document.write("返回瀏覽器是否啓用 cookie，啓用返回 true，禁用返回 false，navigator.cookieEnabled：" + navigator.cookieEnabled + "<br>"); document.write("返回瀏覽器是否聯網，聯網則返回 true，斷網則返回 false ，navigator.onLine：" + navigator.onLine + "<br>"); document.write("返回瀏覽器運行的操作系統平臺navigator.platform：" + navigator.platform + "<br>"); document.write("返回瀏覽器的廠商和版本信息，即瀏覽器運行的操作系統、瀏覽器的版本、名稱navigator.userAgent：" + navigator.userAgent + "<br>"); document.write("返回瀏覽器是否支持運行 Java Applet 小程序，支持則返回 true，不支持則返回 false，navigator.javaEnabled()：" + navigator.javaEnabled() + "<br>"); document.write("返回獲取當前瀏覽器的語言，例如，可能的一個結果是“zh-CN”navigator.language：" + navigator.language + "<br>"); document.write("返回獲取計算機系統的 CPU 型號，例如，Inter通常得到的結果是x86。navigator.cpuClass ：" + navigator.cpuClass + "<br>"); document.write("返回獲取 OS 使用的默認語言。navigator.systemLanguage ：" + navigator.systemLanguage + "<br>"); document.write("返回獲取瀏覽器支持的所有的MIME類型的數組。navigator.mimeTypes ：" + navigator.mimeTypes + "<br>"); document.write("獲取安裝在瀏覽器上的所有插件的數組navigator.plugins ：" + navigator.plugins + "<br>"); document.write("獲取瀏覽器的產品名，例如，可能的結果是Gecko。navigator.product ：" + navigator.product + "<br>"); document.write("返回 獲取瀏覽器產品的更多信息，例如，可能的結果是20030107。navigator.productSub ：" + navigator.productSub + "<br>"); document.write("獲取瀏覽器的廠商名稱，例如，可能的結果是Google Inc.。navigator.vendor ：" + navigator.vendor + "<br>"); document.write("獲取瀏覽器的廠商更多信息navigator.vendorSub ：" + navigator.vendorSub + "<br>"); var user_agent = window.document.getElementById("user_agent"); var u = navigator.userAgent; var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;//android終端 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 //android端 if (isAndroid) { let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden; if (typeof hidden == "undefined" || hidden == false) { //window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=fundtown.toujiao"; //安卓應用市場地址 user_agent.innerHTML = '安卓'; } } else if (isIOS) { //ios端 let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden; if (typeof hidden == "undefined" || hidden == false) { window.location.href = "https://itunes.apple.com/cn/app/id1628504846?mt=8"; //app store地址 user_agent.innerHTML = '蘋果'; } } </script> </body> </html>
案例3：JS跳轉到各手機應用商城
<script type="text/javascript"> //js跳轉到各手機應用商城 //1.是否是內置瀏覽器 function is_neizhi() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return "weixin"; } else if (ua.match(/QQ/i) == "qq") { return "QQ"; } else if (ua.match(/Alipay/i) == "alipay" && payway == 2) { return "alipay"; } return false; } //2.判斷手機品牌 function verifyBrand() { const userAgent = navigator.userAgent.toLowerCase() const isIphone = userAgent.match(/(iphone|ipad|ipod)/i); const isHuawei = userAgent.match(/huawei/i); const isHonor = userAgent.match(/honor/i); const isOppo = userAgent.match(/oppo/i); const isOppoR15 = userAgent.match(/PACM00/i); const isVivo = userAgent.match(/vivo/i); const isXiaomi = userAgent.match(/mi\s/i); const isXIAOMI = userAgent.match(/xiaomi/i); const isXiaomi2s = userAgent.match(/mix\s/i); const isRedmi = userAgent.match(/redmi/i); const isSamsung = userAgent.match(/sm-/i); const isSamsung2 = userAgent.match(/samsung/i); if (isIphone) { return 'iphone' } else if (isHuawei || isHonor) { return 'huawei'; } else if (isOppo || isOppoR15) { return 'oppo'; } else if (isVivo) { return 'vivo'; } else if (isXiaomi || isRedmi || isXiaomi2s || isXIAOMI) { return 'xiaomi'; } else if (isSamsung || isSamsung2) { return 'samsung'; } else { return 'other' } } //3.跳轉下載的主方法,如果是內置瀏覽器,需要跳轉到手機自帶的瀏覽器方可使用 function goDownload() { if (is_neizhi()){ //內置瀏覽器 alert('請用自帶瀏覽器打開') return; } const iosLinkUrl = "https://itunes.apple.com/cn/app/id1628504846?mt=8";//蘋果 const androidLinkurl ="https://tjjd-common-1304488676.cos.ap-beijing.myqcloud.com/download/Android/app-tjjd.apk";//安卓其他 const huaweiUrl = 'appmarket://details?id=fundtown.toujiao';//華爲 const oppoUrl = "oppomarket://details?packagename=fundtown.toujiao";//oppo const vivoUrl = "vivomarket://details?id=fundtown.toujiao";//vivo const xiaomiUrl = 'mimarket://details?id=fundtown.toujiao';//小米 const samsungUrl = 'samsungapps://ProductDetail/fundtown.toujiao';//三星 //以下未用到 const qqChal="tmast://appdetails?pname=fundtown.toujiao"; // 應用寶 直接下載 const baiduChal="http://market.android.com/details?id=<PackageName>"; // 百度搜狗網頁 const jinliChal="http://m.appgionee.com/marketdetail?id=<PackageName>"; // 金立網頁 const lenovoChal="http://market.lenovomm.com/details?id=<PackageName>"; // 聯想 const anzhiChal="anzhimarket://details?id=<PackageName>"; // 安智市場 const meizuChal="mstore://details?package_name=<PackageName>"; // 魅族 switch (this.verifyBrand()) { case 'iphone': window.location.href=iosLinkUrl ; break; case 'xiaomi': window.location.href=xiaomiUrl; break; case 'huawei': window.location.href=huaweiUrl; break; case 'vivo': window.location.href=vivoUrl; break; case 'oppo': window.location.href=oppoUrl; break; case 'samsung': window.location.href=samsungUrl; break; default: window.location.href=androidLinkurl; break; } } goDownload() </script>
判斷APP（sms爲例）是否已經安裝，安裝打開否則下載
var u = navigator.userAgent; var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信內 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 // 微信內 if(isWeixin) { alert('請在瀏覽器上打開') } else { //android端 if (isAndroid) { //安卓app的scheme協議 window.location.href = 'sms://'; setTimeout(function(){ let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden if(typeof hidden =="undefined" || hidden ==false){ //下載 window.location.href ="https://xxxx"; } }, 2000); } //ios端 if (isIOS) { //ios的scheme協議 window.location.href = 'sms://' setTimeout(function(){ let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden if(typeof hidden =="undefined" || hidden ==false){ //App store下載地址 window.location.href = "http://itunes.apple.com/app/xx"; } }, 2000); } }