一 动态脚本
当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的js脚本而降低了整站的性能;
所以就出现了动态脚本的概念,在适时的时候加载相应的脚本;
1.动态引入js文件
var flag = true; if(flag){ loadscript('browserdetect.js'); // 调用函数,引入路径; } function loadscript(url){ var script = document.createelement('script'); // 创建script标签; script.type = 'text/javascript'; // 设置type属性; script.src = url; // 引入url; document.getelementsbytagname('head')[0].appendchild(script); // 将script引入中; }
2.动态执行js代码
var script = document.createelement('script'); script.type = 'text/javascript'; var text = document.createtextnode(alert('lee')); // 设置script标签内容;ie会报错; script.appendchild(text); document.getelementsbytagname('head')[0].appendchild(script); // ps:ie浏览器认为script是特殊元素,不能再访问子节点; // 为了兼容,可以使用text属性来代替; function loadscriptstring(code){ var script = document.createelement(script); script.type = text/javascript; try{ // ie浏览器认为script是特殊元素,不能再访问子节点;报错; script.appendchild(document.createtextnode(code));// w3c方式; }catch(ex){ script.text = code;// ie方式; } document.body.appendchild(script); } // 调用; loadscriptstring(function sayhi(){alert('hi')});
二 动态样式
为了动态的加载样式表,比如切换网站皮肤;
样式有两种方式进行加载,一种是标签,一种是标签;
1.动态引入link文件
var flag = true; if(flag){ loadstyles('basic.css');// 调用函数,引入路径; } function loadstyles(url){ var link = document.createelement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = url; document.getelementsbytagname('head')[0].appendchild(link); }
2.动态执行style代码
var flag = true; if(flag){ var style = docuemnt.createelement('style'); style.type = 'text/css'; document.getelementsbytagname('head')[0].appendchild(style); insertrule(document.stylesheets[0],'#box','background:red',0); } function insertrule(sheet,selectortext,csstext,position){ // 如果是非ie; if(sheet.insertrule){ sheet.insertrule(selectortext+{+csstext+},position); // 如果是ie; }else if(sheet.addrule){ sheet.addrule(selectortext,csstext,position); } }
// 动态执行style2 function loadstylestring(css){ var style = document.createelement(style); style.type = text/css; try{ // ie会报错;不允许向元素添加子节点; style.appendchild(document.createtextnode(css)); }catch(ex){ // 此时,访问元素的stylesheet属性,该属性有有一个csstext属性,可以接受css代码; style.stylesheet.csstext = css; } var head = document.getelementsbytagname(head)[0]; head.appendchild(style); } // 调用; loadstylestring(body {background-color:red});