快捷導(dǎo)航

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

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

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

1. 代碼場景：

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

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

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

此處貼出當前的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= '手機端跳轉(zhuǎn)頁面URL';
 } else {
  window.location= 'PC端跳轉(zhuǎn)頁面URL';
 }
 };
 
 mobilePcRedirect();
 
</script>

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

例如：手機端公共JS中代碼如下

// 實現(xiàn)網(wǎng)站自動跳轉(zhuǎn)電腦PC端與手機端不同頁面
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("手機端跳轉(zhuǎn)頁面URL");
 } else {
 console.log("PC端跳轉(zhuǎn)頁面URL"); 
    // 注：此時寫入的是PC端首頁跳轉(zhuǎn)路徑
   window.location.href = getBasePath() + "/education/new_index.html";
 }
};
mobilePcRedirect();

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

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

獲取項目名稱:

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

獲取項目全路徑:

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

本次分享已完成，大家若有更好的方法或者意見歡迎指正學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: