導語：
最近經常遇到一些人問起網頁中按需加載的需求，例如網頁load時不加載js文件，只有當用戶觸發某個事件時才按其所需加載其所需的js文件，又例如使用者可以隨意地切換網頁的顏色等。綜觀這些需求分析，不外乎就是js裡面的一個動態加載，因此有必要做幾個demo以供大家參考。
一、網頁中動態載入js檔案後執行某個函數：
網頁中的元素：
[html]
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; Green; margin-right:5px; float:left;}
三個css檔案分別為：red.cssyellow.cssblue.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/javascript"></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>
