Dynamic Loading on webpages (js files and css files are replaced)

Lead: Recently, some people often asked about the webpage loading requirements as needed. For example, when loading a webpage, js files are not loaded, only when a user triggers an event can he load the desired js file as needed. For example, the user can switch the color of the webpage at will. Looking at the analysis of these requirements, it is almost a dynamic loading in js, so it is necessary to make a few demos for your reference. 1. Execute a function after the js file is dynamically loaded on the webpage: Elements in the webpage: [html] <input type = "button" value = "dynamic loading of js Files" id = "btn1"/> js Code: create by format: <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); // after loading, execute its internal functions} // check whether there is a duplicate js file function checkIsExist (url) {var scripts = document. getElementsByTagName ("script"); // the query page contains a js file to be loaded for (var I = 0; I <scripts. length; I ++) {if (scripts [I]. src. in DexOf (url)>-1) {return true;} return false;} The js file is dynamically loaded and running is complete! Ii. Dynamic Loading of css files for skin replacement function page style [html] # ulList li {list-style-type: none; height: 50px; width: 50px; background-color: green; margin-right: 5px; float: left;} The Three css files are: red.css \ yellow.css \ blue.css, which are saved in the css folder and whose content is background-color: color page layout of corresponding file names [html] <ul id = "ulList"> <li> </li> </ul> page 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 () {// read the URL var cssHrefCookie from the cookie without css =$. cookie ("cssName"); if (cssHrefCookie) {loadCss (cssHrefCookie) ;}$ ("# ulList> li "). map (function (index, item) {detail (item).css ("background-color", arrCss [index]. color ). click (function () {// 1. first remove the color link $ ("link") included in the arrCss array on the page "). map (function (index, item) {// address of the css link in the page var href = $ (item ). attr ("href"); // traverse the arrCss array to compare its value with the value obtained on the page $. map (arrCss, function (value, key) {// Based on the address of the css link obtained by the array var cssHref = "css/" + arrCss [key]. color + ". css "; if (cssHref = href) {// 1. remove the link tag $ (item ). remove () ;}}) ;}); // dynamically load the css file to the page. var url = "css/" + arrCss [index]. color + ". css "; loadCss (url); // Save the current user's css address to the cookie $. cookie ("cssName", url, {expires: 1}) ;}); // function loadCss (url) for dynamically loading css files) {// <link href = "css/main.css" rel = "stylesheet" type = "text/css"/> var link = document. createElement ("link"); link. rel = "stylesheet"; link. type = "text/css"; link. href = url; document. getElementsByTagName ("head") [0]. appendChild (link) ;}</script>