Das dynamische Laden von JS- und CSS-Dateien auf der Webseite bedeutet, den Skin zu ändern

Einführung:

In letzter Zeit werden mir oft Fragen gestellt, ob eine JS-Datei beim Laden einer Webseite benötigt wird nach Bedarf, wenn der Benutzer ein Ereignis auslöst, und der Benutzer kann beispielsweise die Farbe der Webseite nach Belieben ändern. Wenn man sich diese Anforderungsanalyse ansieht, handelt es sich lediglich um ein dynamisches Laden in js. Daher ist es notwendig, mehrere Demos als Referenz zu erstellen.

1. Führen Sie nach dem dynamischen Laden der js-Datei auf der Webseite eine Funktion aus:

Elemente auf der Webseite:

[html]

b95623b61e0010f5a9f4056f9af38acf

js-Code:

照格式创建：<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 Dateien werden dynamisch geladen und vollständig ausgeführt!

2. CSS-Dateien dynamisch laden, um die Skin-Änderungsfunktion zu erreichen

Seitenstil

[html]

#ulList li{ list-style-type: none; width:50px; border-right:5px;}

Die drei CSS-Dateien sind: red.cssblue .css, im CSS-Ordner gespeichert, sein Inhalt ist Hintergrundfarbe: entsprechend der Farbe des Dateinamens

Seitenlayout

[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>