導語：

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

?

一、網(wǎng)頁中動態(tài)載入js檔案後執(zhí)行某個函數(shù)：

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

[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ù)  
            }  
  
//檢查頁面中是否存在重名的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檔案動態(tài)載入並運作完畢！

?

二、動態(tài)載入css檔案實現(xiàn)換膚的功能

頁style

[html] ?

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

三個css檔案分別為：red.cssyellow.cssblue.css，保存在css資料夾中，其內(nèi)容為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數(shù)組中的顏色link  
                    $("link").map(function (index, item) {  
                        //頁面中css鏈接的地址  
                        var href = $(item).attr("href");  
  
                        //遍歷arrCss數(shù)組對其值與頁面獲得的值進行比對  
                        $.map(arrCss, function (value, key) {  
                            //根據(jù)數(shù)組獲得的css鏈接的地址  
                            var cssHref = "css/" + arrCss[key].color + ".css";  
                            if (cssHref == href) {  
                                //1.移除該link標簽  
                                $(item).remove();  
                            }  
                        });  
                    });  
  
                    //動態(tài)加載css文件到頁面中  
                    var url = "css/" + arrCss[index].color + ".css";  
                    loadCss(url);  
  
                    //保存當前用戶的css地址到cookie中  
                    $.cookie("cssName", url, { expires: 1 });  
                });  
            });  
        });  
  
        //動態(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>