导语:
最近经常遇到一些人问起网页中按需加载的需求,例如网页load时不加载js文件,只有当用户触发某个事件时才按其所需加载其所需的js文件,又比如用户可以随意地切换网页的颜色等。纵观这些需求分析,不外乎就是js里面的一个动态加载,因此有必要做几个demo以供大家参考。
一、网页中动态加载js文件后执行某个函数:
网页中的元素:
[html]
js代码:
照格式创建: [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]