웹페이지에 js 파일, css 파일을 동적으로 로딩한다는 것은 스킨을 바꾸는 것을 의미합니다.

소개:

요즘 웹페이지에 온디맨드 로딩이 필요한지 문의하시는 분들이 종종 있습니다. 예를 들어 웹페이지를 로딩할 때 js 파일은 로딩되지 않고 로딩만 됩니다. 사용자가 이벤트를 트리거할 때 필요에 따라 js 파일이 필요하며, 예를 들어 사용자는 웹 페이지의 색상을 마음대로 전환할 수 있습니다. 이러한 요구사항 분석을 살펴보면 이는 js의 동적 로딩에 지나지 않으므로 참조용으로 여러 데모를 만드는 것이 필요합니다.

1. 웹페이지에 js 파일을 동적으로 로드한 후 다음 함수를 실행합니다.

웹페이지의 요소:

[html]

de9b64a897b2a98e4299f99a77dab4e6

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 파일이 동적으로 로드되고 실행이 완료됩니다!

2. CSS 파일을 동적으로 로드하여 스킨 변경 기능 구현

페이지 스타일

[html]

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

세 개의 CSS 파일은 red.cssblue입니다. .css, css 폴더에 저장됨, 내용은 배경색입니다: 파일 이름의 색상에 해당

페이지 레이아웃

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