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}");

 

posted @ 2015-04-03 10:14  翌子涵  阅读(2646)  评论(0编辑  收藏  举报