首頁 > php教程 > PHP开发 > 主體

網頁中的動態載入js檔案和css檔案即換膚

高洛峰
發布: 2016-11-24 09:43:20
原創
1721 人瀏覽過

導語:

最近經常遇到一些人問起網頁中按需加載的需求,例如網頁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>
登入後複製


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板