JavaScript--动态加载脚本和样式(23)

2024-04-27 14:11:19

字体：大中小

来源：转载

供稿：网友

javaScript--动态加载脚本和样式(23)

一动态脚本

// 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能;

// 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本;

 1 1.动态引入js文件 2     var flag = true; 3     if(flag){     4         loadScript('browserdetect.js');                    // 调用函数,引入路径; 5     } 6     function loadScript(url){ 7         var script = document.createElement('script');     // 创建script标签; 8         script.type = 'text/Javascript';                   // 设置type属性; 9         script.src = url;                                  // 引入url;10         document.getElementsByTagName('head')[0].appendChild(script);    // 将script引入<head>中;11     }

 1 2.动态执行js代码 2     var script = document.createElement('script'); 3     script.type = 'text/javascript'; 4     var text = document.createTextNode("alert('Lee')");    // 设置script标签内容;IE会报错; 5     script.appendChild(text); 6     document.getElementsByTagName('head')[0].appendChild(script); 7  8     // PS:IE浏览器认为script是特殊元素,不能再访问子节点; 9     // 为了兼容,可以使用text属性来代替;10     function loadScriptString(code){11         var script = document.createElement("script");12         script.type = "text/javascript";13         try{14         // IE浏览器认为script是特殊元素,不能再访问子节点;报错;15             script.appendChild(document.createTextNode(code));　　// W3C方式;16         }catch(ex){17             script.text = code;　　　　　　　　　　　　　　　　　　　　// IE方式;18         }19         document.body.appendChild(script);20     }21     // 调用;22     loadScriptString("function sayHi(){alert('hi')}");

二动态样式

// 为了动态的加载样式表,比如切换网站皮肤;

// 样式有两种方式进行加载,一种是<link>标签,一种是<style>标签;

 1 1.动态引入link文件 2     var flag = true; 3     if(flag){ 4         loadStyles('basic.CSS');　　　　　　　　　　　　　　　　　　// 调用函数,引入路径; 5     } 6     function loadStyles(url){ 7         var link = document.createElement('link'); 8         link.rel = 'stylesheet'; 9         link.type = 'text/css';10         link.href = url;11         document.getElementsByTagName('head')[0].appendChild(link);12     }

 1 2.动态执行style代码 2     var flag = true; 3     if(flag){ 4         var style = docuemnt.createElement('style'); 5         style.type = 'text/css'; 6         document.getElementsByTagName('head')[0].appendChild(style); 7         insertRule(document.styleSheets[0],'#box','background:red',0); 8     } 9     function insertRule(sheet,selectorText,cssText,position){10         // 如果是非IE;11         if(sheet.insertRule){12             sheet.insertRule(selectorText+"{"+cssText+"}",position);13         // 如果是IE;14         }else if(sheet.addRule){15             sheet.addRule(selectorText,cssText,position);16         }17     }

 1 // 动态执行style2 2     function loadStyleString(css){ 3         var style = document.createElement("style"); 4         style.type = "text/css"; 5         try{ 6         // IE会报错;不允许向<style>元素添加子节点; 7             style.appendChild(document.createTextNode(css)); 8         }catch(ex){ 9         // 此时,访问元素的StyleSheet属性,该属性有有一个cssText属性,可以接受CSS代码;10             style.styleSheet.cssText = css;11         }12         var head = document.getElementsByTagName("head")[0];13         head.appendChild(style);14     }15     // 调用;16     loadStyleString("body {background-color:red}");

上一篇：纯JS画点、画线、画圆的方法

下一篇：怎样区分JQuery对象和Dom对象常用的写法