快捷導(dǎo)航

JS如何實(shí)現(xiàn)網(wǎng)站中PC端和手機(jī)端自動(dòng)識(shí)別并跳轉(zhuǎn)對(duì)應(yīng)的代碼

更新時(shí)間：2020年01月08日 11:16:53 作者：閆小樣丶

這篇文章主要介紹了JS如何實(shí)現(xiàn)網(wǎng)站中PC端和手機(jī)端自動(dòng)識(shí)別并跳轉(zhuǎn)對(duì)應(yīng)的代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 代碼場(chǎng)景：

描述：在項(xiàng)目中，一般我們會(huì)使用響應(yīng)式布局的方式或者借助bootstrap等插件來(lái)做響應(yīng)式的網(wǎng)站。但是根據(jù)業(yè)務(wù)的需求，手機(jī)端可能會(huì)在功能上精簡(jiǎn)很多，我們也會(huì)寫(xiě)兩套代碼，分別用來(lái)實(shí)現(xiàn)PC端和手機(jī)端的功能。此時(shí)，就存在一個(gè)問(wèn)題。項(xiàng)目在部署的時(shí)候只會(huì)使用一個(gè)地址，不會(huì)針對(duì)手機(jī)和PC端代碼分別進(jìn)行部署。這個(gè)時(shí)候就需要我們通過(guò)去識(shí)別視口分辨率的大小，來(lái)自動(dòng)去跳轉(zhuǎn)對(duì)應(yīng)的代碼。

2. 實(shí)現(xiàn)方式：

目前網(wǎng)上有很多的方法用來(lái)實(shí)現(xiàn)PC端和手機(jī)端的代碼跳轉(zhuǎn)，但我只用了一種實(shí)現(xiàn)方式。其他的暫時(shí)還沒(méi)有嘗試，希望可以跟大家學(xué)到更多的解決方案。在此特別感謝<<--老蔣部落-->>的方法給予了我很大的幫助。

此處貼出當(dāng)前的JS代碼：

<script type="text/javascript">
 
 function mobilePcRedirect() {
 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 || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
  window.location.href= '手機(jī)端跳轉(zhuǎn)頁(yè)面URL';
 } else {
  window.location= 'PC端跳轉(zhuǎn)頁(yè)面URL';
 }
 };
 
 mobilePcRedirect();
 
</script>

將此方法分別寫(xiě)在手機(jī)端和PC端公共的Common.js中，然后在對(duì)應(yīng)位置寫(xiě)入對(duì)應(yīng)的路徑即可。

例如：手機(jī)端公共JS中代碼如下

// 實(shí)現(xiàn)網(wǎng)站自動(dòng)跳轉(zhuǎn)電腦PC端與手機(jī)端不同頁(yè)面
function mobilePcRedirect() {
 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 || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
 console.log("手機(jī)端跳轉(zhuǎn)頁(yè)面URL");
 } else {
 console.log("PC端跳轉(zhuǎn)頁(yè)面URL"); 
    // 注：此時(shí)寫(xiě)入的是PC端首頁(yè)跳轉(zhuǎn)路徑
   window.location.href = getBasePath() + "/education/new_index.html";
 }
};
mobilePcRedirect();

反之，PC端公共JS中同樣的寫(xiě)法即可。

3. 拓展內(nèi)容(如何獲取項(xiàng)目的根路徑？)

獲取項(xiàng)目名稱:

/**
 * 獲取項(xiàng)目名稱 如：/video_learning
 **/
 
function getProjectName() {
 var strPath = window.document.location.pathname;
 var postPath = strPath.substring(0,strPath.substr(1).indexOf('/')+1);
 return postPath;
}

獲取項(xiàng)目全路徑:

/**
 * 獲取項(xiàng)目全路徑 如：http://localhost:8080/video_learning
 * */
 
function getBasePath(){
 //獲取當(dāng)前網(wǎng)址
 var curWwwPath=window.document.location.href;
 
 //獲取主機(jī)地址之后的目錄
 var pathName=window.document.location.pathname;
 var pos=curWwwPath.indexOf(pathName);
 
 //獲取地址到端口號(hào)
 var localhostPath=curWwwPath.substring(0,pos);
 
 //項(xiàng)目名
 var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); 
 return (localhostPath+projectName);
}

本次分享已完成，大家若有更好的方法或者意見(jiàn)歡迎指正學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: