導(dǎo)語(yǔ)：

最近經(jīng)常遇到一些人問(wèn)起網(wǎng)頁(yè)中按需加載的需求，例如網(wǎng)頁(yè)load時(shí)不加載js文件，只有當(dāng)用戶觸發(fā)某個(gè)事件時(shí)才按其所需加載其所需的js文件，又比如用戶可以隨意地切換網(wǎng)頁(yè)的顏色等?？v觀這些需求分析，不外乎就是js里面的一個(gè)動(dòng)態(tài)加載，因此有必要做幾個(gè)demo以供大家參考。

?

一、網(wǎng)頁(yè)中動(dòng)態(tài)加載js文件后執(zhí)行某個(gè)函數(shù)：

網(wǎng)頁(yè)中的元素：

[html]?

?

js代碼：

照格式創(chuàng)建：<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); //加載完成后，執(zhí)行其內(nèi)部的函數(shù)  
            }  
  
//檢查頁(yè)面中是否存在重名的js文件  
function checkIsExist(url) {  
            var scripts = document.getElementsByTagName("script");  
            //遍歷查詢頁(yè)面中已存在有想要加載的js文件  
            for (var i = 0; i < scripts.length; i++) {  
                if (scripts[i].src.indexOf(url)>-1) {  
                    return true;  
                }  
            }  
            return false;  
        }

js文件動(dòng)態(tài)加載并運(yùn)行完畢！

二、動(dòng)態(tài)加載css文件實(shí)現(xiàn)換膚的功能

頁(yè)面style

[html]

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

三個(gè)css文件分別為：red.css\yellow.css\blue.css，保存在css文件夾中，其內(nèi)容就是background-color:分別對(duì)應(yīng)文件名的顏色

頁(yè)面布局

[html]  
<ul id="ulList">  
   <li></li>  
   <li></li>  
   <li></li>  
</ul>  
頁(yè)面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中讀取有沒(méi)有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.先移除頁(yè)面中包括在arrCss數(shù)組中的顏色link  
                    $("link").map(function (index, item) {  
                        //頁(yè)面中css鏈接的地址  
                        var href = $(item).attr("href");  
  
                        //遍歷arrCss數(shù)組對(duì)其值與頁(yè)面獲得的值進(jìn)行比對(duì)  
                        $.map(arrCss, function (value, key) {  
                            //根據(jù)數(shù)組獲得的css鏈接的地址  
                            var cssHref = "css/" + arrCss[key].color + ".css";  
                            if (cssHref == href) {  
                                //1.移除該link標(biāo)簽  
                                $(item).remove();  
                            }  
                        });  
                    });  
  
                    //動(dòng)態(tài)加載css文件到頁(yè)面中  
                    var url = "css/" + arrCss[index].color + ".css";  
                    loadCss(url);  
  
                    //保存當(dāng)前用戶的css地址到cookie中  
                    $.cookie("cssName", url, { expires: 1 });  
                });  
            });  
        });  
  
        //動(dòng)態(tài)加載css文件的函數(shù)  
        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>