网页中的动态加载js文件和css文件即换肤

导语：

最近经常遇到一些人问起网页中按需加载的需求，例如网页load时不加载js文件，只有当用户触发某个事件时才按其所需加载其所需的js文件，又比如用户可以随意地切换网页的颜色等。纵观这些需求分析，不外乎就是js里面的一个动态加载，因此有必要做几个demo以供大家参考。

一、网页中动态加载js文件后执行某个函数：

网页中的元素：

[html]

<input type="button" value="动态加载js文件" id="btn1" />

js代码：

照格式创建：<script src="../js/myJs.js" type="text/javascript"></script>[html]  document.getElementById("btn1").onclick = function () {                  var url = "js/myjs.js";                    if (!checkIsExist(url)) {                      var script = document.createElement("script");                      script.type = "text/javascript";                      script.src = "../" + url;                      document.body.appendChild(script);                  }                    setTimeout("sayHi()", 100); //加载完成后，执行其内部的函数              }    //检查页面中是否存在重名的js文件  function checkIsExist(url) {              var scripts = document.getElementsByTagName("script");              //遍历查询页面中已存在有想要加载的js文件              for (var i = 0; i < scripts.length; i++) {                  if (scripts[i].src.indexOf(url)>-1) {                      return true;                  }              }              return false;          }

js文件动态加载并运行完毕！

二、动态加载css文件实现换肤的功能

页面style

[html]

#ulList li{ list-style-type: none; height:50px; width:50px; background-color:Green; margin-right:5px; float:left;}

三个css文件分别为：red.css\yellow.css\blue.css，保存在css文件夹中，其内容就是background-color:分别对应文件名的颜色

页面布局

[html]  <ul id="ulList">     <li></li>     <li></li>     <li></li>  </ul>  页面js www.2cto.com[html]  <script src="../js/jquery-1.8.3.min.js" type="text/javascri<em style="color:transparent">来源gao.dai.ma.com搞@代*码网</em>pt"></script>      <script src="../js/cookies.jquery.js" type="text/javascript"></script>      <script type="text/javascript">          var arrCss = [{ "color": "red" }, { "color": "yellow" }, { "color": "blue" } ]          $(function () {              //从cookie中读取有没有css的链接地址              var cssHrefCookie = $.cookie("cssName");              if (cssHrefCookie) {                  loadCss(cssHrefCookie);              }                $("#ulList > li").map(function (index, item) {                  $(item).css("background-color", arrCss[index].color).click(function () {                      //1.先移除页面中包括在arrCss数组中的颜色link                      $("link").map(function (index, item) {                          //页面中css链接的地址                          var href = $(item).attr("href");                            //遍历arrCss数组对其值与页面获得的值进行比对                          $.map(arrCss, function (value, key) {                              //根据数组获得的css链接的地址                              var cssHref = "css/" + arrCss[key].color + ".css";                              if (cssHref == href) {                                  //1.移除该link标签                                  $(item).remove();                              }                          });                      });                        //动态加载css文件到页面中                      var url = "css/" + arrCss[index].color + ".css";                      loadCss(url);                        //保存当前用户的css地址到cookie中                      $.cookie("cssName", url, { expires: 1 });                  });              });          });            //动态加载css文件的函数          function loadCss(url) {              //<link href="http://www.php1.cn/">            var link = document.createElement("link");              link.rel = "stylesheet";              link.type = "text/css";              link.href = url;              document.getElementsByTagName("head")[0].appendChild(link);          }      </script>

喜欢 (0)赏

[搞代码]

分享 (0)