当前位置:编程学习 > JS >>

网页中的动态加载(js文件和css文件即换肤)

导语:
最近经常遇到一些人问起网页中按需加载的需求,例如网页load时不加载js文件,只有当用户触发某个事件时才按其所需加载其所需的js文件,又比如用户可以随意地切换网页的颜色等。纵观这些需求分析,不外乎就是js里面的一个动态加载,因此有必要做几个demo以供大家参考。
 
一、网页中动态加载js文件后执行某个函数:
网页中的元素:
[html] 
<input type="button" value="动态加载js文件" id="btn1" />  
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; width:50px; background-color:Green; margin-right:5px; float:left;}  
三个css文件分别为:red.css\yellow.css\blue.css,保存在css文件夹中,其内容就是background-color:分别对应文件名的颜色
页面布局
[html]  
<ul id="ulList">  
   <li></li>  
   <li></li>  
   <li></li>  
</ul>  
页面js www.zzzyk.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="css/main.css" rel="stylesheet" type="text/css" />  
            v
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,