前端页面使用js实现不同终端引入不同的html页面css样式js等

本文链接：https://blog.csdn.net/hj7jay/article/details/60746687

我在工作中刚遇到一个关于一个主html在不同终端下引入不同的html页面css样式js等的问题，下面我把它的实现方法分享给大家。

分别新建移动端和PC端需要的html文件(这里就以html文件格式命名)

mobile-index.html代码如下：

<h1>这是移动端页面</h1>

pc-index.html代码如下：

<h1>这是pc端页面</h1>

样式文件:

mobile.css代码如下：

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

pc.css代码如下：

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

最后就是重点了：

新建一个index.html文件代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>一个页面实现pc端和移动端访问不同页面</title>
  <script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
  /*根据不同的客户端(这里指移动端和pc端)引入样式*/
    var includeLinkStyle = function (url) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
  };
  var browserRedirect = function () {
    /* 判断是pc端还是移动端  网上有很多，我只用其中一种演示*/
    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("phone");
      /*includeLinkStyle("样式地址");*/
      includeLinkStyle("mobile.css");
      $('body').load('mobile-index.html');
    } else {
      console.log("pc");
      includeLinkStyle("pc.css");
      $('body').load('pc-index.html');
    }
  };
  browserRedirect();
</script>
</body>
</html>

好了，这就是全部过程，是不是感觉很简单。不用怀疑，就是这么简单。