使用js實現不一樣終端引入不一樣的html頁面css樣式js等

時間 2019-11-11

標籤使用實現不一樣終端引入 html 頁面 css 樣式欄目 JavaScript 简体版

原文原文鏈接

我在工做中剛遇到一個關於一個主html在不一樣終端下引入不一樣的html頁面css樣式js等的問題，下面我把它的實現方法分享給你們。javascript

分別新建移動端和PC端須要的html文件(這裏就以html文件格式命名)css

mobile-index.html代碼以下：html

<h1>這是移動端頁面</h1>

pc-index.html代碼以下：java

<h1>這是pc端頁面</h1>

樣式文件:jquery

mobile.css代碼以下：android

body {
  background-color: #0f0ff0;
}
h1{
  color: #0ff;
}

pc.css代碼以下：web

body {
  background-color: #ff0;
}
h1 {
  color: #f00;
}

最後就是重點了：windows

新建一個index.html文件代碼以下：瀏覽器

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1">
 6   <title>一個頁面實現pc端和移動端訪問不一樣頁面</title>
 7   <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 8 </head>
 9 <body>
10 <script type="text/javascript">
11   /*根據不一樣的客戶端(這裏指移動端和pc端)引入樣式*/
12     var includeLinkStyle = function (url) {
13     var link = document.createElement('link');
14     link.rel = 'stylesheet';
15     link.type = 'text/css';
16     link.href = url;
17     document.getElementsByTagName('head')[0].appendChild(link);
18   };
19   var browserRedirect = function () {
20     /* 判斷是pc端仍是移動端  網上有不少，我只用其中一種演示*/
21     var sUserAgent = navigator.userAgent.toLowerCase();
22     var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
23     var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
24     var bIsMidp = sUserAgent.match(/midp/i) == "midp";
25     var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
26     var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
27     var bIsAndroid = sUserAgent.match(/android/i) == "android";
28     var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
29     var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
30     /* 根據不一樣的客戶端引入樣以及加載頁面 */
31     if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
32       console.log("phone");
33       /*includeLinkStyle("樣式地址");*/
34       includeLinkStyle("mobile.css");
35       $('body').load('mobile-index.html');
36     } else {
37       console.log("pc");
38       includeLinkStyle("pc.css");
39       $('body').load('pc-index.html');
40     }
41   };
42   browserRedirect();
43 </script>
44 </body>
45 </html>