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