使用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>

好了，这就是所有过程，是否是感受很简单。不用怀疑，就是这么简单。app

结束语：

感谢阅读，欢迎交流！

本文为原创文章，会常常更新知识点以及修正一些错误，所以转载请保留原出处，以免陈旧错误知识的误导。

本文地址：http://www.cnblogs.com/baixiaosheng/p/4189210.html