JS 判斷是否是手機端並跳轉操作

原創 风灵使 2019-09-09 03:05
原文鏈接：https://blog.csdn.net/WuLex

JS 判斷運行當前腳本的應用程序是否爲手機端或者一些其他信息，在我的工作中遇到的不是十分頻繁，被我的同事一問就給問住了，所以把之前找到的一些知識點整理出來，供大家參考，若哪裏不對歡迎指出，我會及時的更改 (#.#)。

 window.navigator

先從這個屬性入手：window.navigator 返回一個navigator對象的引用，可以用它來查詢一些關於運行當前腳本的應用程序的相關信息。

常用屬性和方法：（想知道詳細屬性和方法的請點MDN）

Navigator 對象屬性

屬性 說明
appCodeName 返回當前瀏覽器的內部“代碼”名稱,該名稱可能是不"正確"的.
appName 返回當前瀏覽器的正式名稱,該名稱可能是不"正確"的.
appVersion 返回當前瀏覽器的版本號,該值可能是不"正確"的.
cookieEnabled 返回一個布爾值,表明當前瀏覽器是否啓用了cookies.
platform 返回一個字符串,表明當前所使用的系統平臺類型.
userAgent 返回當前瀏覽器的user agent字符串.

Navigator 對象方法

方法 描述
javaEnabled() 表明當前瀏覽器是否啓用了對Java的支持.
vibrate() 如果設備支持震動(手機或其他),則觸發設備震動.
registerContentHandler 允許網站將自己註冊成爲一個給定MIME類型的內容的處理程序.

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>	
<div id="test"></div>
<script>
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>";
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>";
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>";
txt+= "<p>啓用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平臺: " + navigator.platform + "</p>";
txt+= "<p>用戶代理: " + navigator.userAgent + "</p>";
txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>";
document.getElementById("test").innerHTML=txt;
</script>
</body>
</html>

常用跳轉代碼

<script type="text/javascript"> 
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
  var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
  var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
  var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
  var bIsAndroid = sUserAgent.match(/android/i) == 'android';
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = '跳轉的移動端網址';
  }
 })();
 </script>
<script type="text/javascript"> 
<!-- 
  //平臺、設備和操作系統 
  var system = { 
   win: false, 
   mac: false, 
   xll: false, 
   ipad:false
  }; 
  //檢測平臺 
  var p = navigator.platform; 
  system.win = p.indexOf("Win") == 0; 
  system.mac = p.indexOf("Mac") == 0; 
  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
  system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
  //跳轉語句，如果是手機訪問就自動跳轉到wap.baidu.com頁面 
  if (system.win || system.mac || system.xll||system.ipad) { 

     //  something.... 
  } else { 
   window.location.href = "PC端網址"; 
  } 
--> 
</script>

騰訊跳轉

<script type="text/javascript">
if(window.location.toString().indexOf('pref=padindex') != -1){
}else{
 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ 
  if(window.location.href.indexOf("?mobile")<0){
  try{
   if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
    window.location.href="手機端網址";
   }else if(/iPad/i.test(navigator.userAgent)){
    //window.location.href="pad網址"
   }else{
    window.location.href="PC端網址"
   }
  }catch(e){}
 }
 }
}
</script>
<script type="text/javascript"> 
<!-- 
  //平臺、設備和操作系統 
  var system = { 
   win: false, 
   mac: false, 
   xll: false, 
   ipad:false
  }; 
  //檢測平臺 
  var p = navigator.platform; 
  system.win = p.indexOf("Win") == 0; 
  system.mac = p.indexOf("Mac") == 0; 
  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
  system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
  //跳轉語句，如果是手機訪問就自動跳轉到手機端網頁
  if (system.win || system.mac || system.xll||system.ipad) { 
  } else { 
   window.location.href = "PC網頁"; 
  } 
--> 
</script>
JS 判斷瀏覽器客戶端類型(ipad,iphone,android)  
<script type="text/javascript">  
 var bForcepc = fGetQuery("dv") == "pc"; 
 function fBrowserRedirect(){ 
  var sUserAgent = navigator.userAgent.toLowerCase(); 
  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 
  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; 
  var bIsMidp = sUserAgent.match(/midp/i) == "midp"; 
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 
  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; 
  var bIsAndroid = sUserAgent.match(/android/i) == "android"; 
  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; 
  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 
  if(bIsIpad){ 
   var sUrl = location.href;  
   if(!bForcepc){ 
    window.location.href = "手機網址"; 
   } 
  } 
  if(bIsIphoneOs || bIsAndroid){ 
   var sUrl = location.href;  
   if(!bForcepc){ 
    window.location.href = "手機網址"; 
   } 
  } 
  if(bIsMidp||bIsUc7||bIsUc||bIsCE||bIsWM){ 
   var sUrl = location.href;  
   if(!bForcepc){ 
    window.location.href = ""; 
   } 
  } 
 } 
 function fGetQuery(name){//獲取參數值 
  var sUrl = window.location.search.substr(1); 
  var r = sUrl.match(new RegExp("(^|&)" + name + "=([^&]*)(&|$)")); 
  return (r == null ? null : (r[2])); 
 } 
 function fShowVerBlock(){  
  if(bForcepc){ 
   document.getElementByIdx_x("dv_block").style.display = "block"; 
  } 
  else{ 
   document.getElementByIdx_x("ad_block").style.display = "block"; 
  } 
 } 
 fBrowserRedirect(); 
 </script>

測試是什麼終端

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
alert('是否是Android：'+isAndroid);
alert('是否是iOS：'+isiOS);

JS判斷手機打開PC網站的時候跳轉到移動端網站

如果是手機瀏覽器則跳轉到手機端網站！如果是PC瀏覽器則停留！將下面代碼添加到電腦端網站的首頁body下面就好！

<script language="JavaScript">
function mobile_device_detect(url)
{
var thisOS=navigator.platform;
var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
for(var i=0;i<os.length;i++)
{
if(thisOS.match(os[i]))
{
window.location=url;
}
}
//因爲相當部分的手機系統不知道信息,這裏是做臨時性特殊辨認
if(navigator.platform.indexOf('iPad') != -1)
{
window.location=url;
}
//做這一部分是因爲Android手機的內核也是Linux
//但是navigator.platform顯示信息不盡相同情況繁多,因此從瀏覽器下手，即用navigator.appVersion信息做判斷
var check = navigator.appVersion;
if( check.match(/linux/i) )
{
//X11是UC瀏覽器的平臺 ，如果有其他特殊瀏覽器也可以附加上條件
if(check.match(/mobile/i) || check.match(/X11/i))
{
window.location=url;
}
}
//類in_array函數
Array.prototype.in_array = function(e)
{
for(i=0;i<this.length;i++)
{
if(this[i] == e)
return true;
}
return false;
}
}
mobile_device_detect(“http://m.baidu.com”);
</script>

JS判斷手機自動跳轉到手機網站

爲了讓手機用戶瀏覽網站的方便，我們做網站時，會做響應式自適應網站。可以自動判斷用戶瀏覽設備進行轉換網站版面。如果用戶使用手機瀏覽就跳轉到手機網站。

除了自適應網站之外，我們還可在做網站時使用JS判斷手機自動跳轉到手機網站。方法也是比較簡單。

手機網站
如果你有PC網站和手機網站二個版面，例如二者的域名分別是www.xuewangzhan.net和wap.xuewangzhan.net，那麼你就可以在PC網站的頭部文件裏放以下的JS進行判斷。

<script type="text/javascript">
        var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate",
　　　　　　 "bada", "nokia", "lg", "ucweb", "skyfire");
        var browser = navigator.userAgent.toLowerCase();
        var isMobile = false;
        for (var i=0; i<mobileAgent.length; i++) {
            if (browser.indexOf(mobileAgent[i])!=-1) {
                isMobile = true;
                location.href = 'http://wap.xuewangzhan.net';
                break;
            }
        }
</script>

這段代碼可以判斷用戶瀏覽設備類型，如果是手機訪問就跳轉到wap.xuewangzhan.net，如果是電腦瀏覽就不會跳轉，仍然是www.xuewangzhan.net。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

html單選框radio的簡單應用

html單選框radio的簡單應用  表格：           <table>          <tr>           <td>（1）發生竣工驗收：</td>           <td>            <input t

Rachael1001 2020-06-21 16:57:53

JS數組扁平化(flat)方法總結詳解

需求:多維數組=>一維數組 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0種處理:直接的調用 arr_flat = arr.flat(I

风神修罗使 2020-06-12 15:46:08

《dom啓蒙》讀書筆記和測試代碼

风神修罗使 2020-05-20 10:55:09

A標籤中href和onclick傳遞this對象的實現方法

风神修罗使 2020-05-12 21:52:15

js裏function前面加!

风神修罗使 2020-05-12 05:13:46

前端安全配置之Content-Security-Policy(csp)

风神修罗使 2020-05-07 13:49:50

iframe跨域解決辦法

风神修罗使 2020-04-24 16:45:23

div,span等標籤支持focus/blur事件

风神修罗使 2020-03-13 08:06:04

利用javascript窗口框架做的判斷ip地址合法性並將其分類

jilily 2020-02-25 14:34:00

利用HTML+JAVASCRIPT編寫的判斷IP地址合法性，並將其合法IP地址分類

jilily 2020-02-25 14:34:00

Window.Open詳解

Rachael1001 2020-02-25 02:45:32

目錄樹控件簡介

Rachael1001 2020-02-25 02:45:32

40種特殊的JavaScript

Rachael1001 2020-02-25 02:45:32

Window For JavaScript

Rachael1001 2020-02-25 02:45:32

html隱藏div

Rachael1001 2020-02-25 02:45:32