導語：

最近經常遇到一些人問起網頁中按需載入的需求，例如網頁load時不載入js檔案，只有當使用者觸發某個事件時才按其所需載入其所需的js檔案，又比如使用者可以隨意地切換網頁的顏色等。縱觀這些需求分析，不外乎就是js裡面的一個動態載入，因此有必要做幾個demo以供大家參考。

一、網頁中動態載入js檔案後執行某個函式：

網頁中的元素：

<input type="button" value="動態載入js檔案" id="btn1" />

js程式碼：

照格式建立：<script src="../js/myJs.js" type="text/javascript"></script>

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;
        }
 

二、動態載入css檔案實現換膚的功能

頁面style

#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:分別對應檔案名的顏色

頁面佈局

<ul id="ulList">
   <li></li>
   <li></li>
   <li></li>
</ul>
 

<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="css/main.css" rel="stylesheet" type="text/css" />
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = url;
            document.getElementsByTagName("head")[0].appendChild(link);
        }
    </script>