动态加载脚本和样式

动态脚本：
当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的JS脚本而降低了整站的性能，所以就出现了动态脚本
的概念，在适时的时候加载相应的脚本。

比如：我们想在需要检测浏览器的时候，再引入检测文件。

demo.js
window.onload=function(){
var flag=true;
alert(typeof BrowserDetect); //打印一下检测文件js里面的方法存不存在
}
if(flag){
var script=document.createElement('script');
script.type='text/javascript';
script.src='browserdetect.js';
document.getElementsByTagName('head')[0].appendChild(script);
}

------------------------------------------------------
封装成函数
if(flag){
loadScript('browserdetect.js');
}
function loadScript(url){
var script=document.createElement('script');
script.type='text/javascript';
script.src=url;
document.getElementsByTagName('head')[0].appendChild(script);
}

-----------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
--------

动态添加js脚本
if(flag){
var script=document.createElement('script');
script.type='text/javascript';
script.appendChild(document.createTextNode("alert('Lee')")); //IE不支持这种写法
//IE浏览器认为script是特殊元素，不能再访问子节点。为了兼容，可以使用text属性来代替
script.text="alert('Lee')"; //IE支持了
document.getElementsByTagName('head')[0].appendChild(script);
}

-----------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
--------
动态加载css

var flag=true;
if(flag){
var link=document.createElement('link');
link.rel='stylesheet';
link.type='text/css';
link.href='basic.css';
document.getElementsByTagName('head')[0].appendChild(link);
}

---------------------
var flag=true;
if(flag){
var style=document.createElement('style');
style.type="text/css";
//style.appendChild(document.createTextNode('#box{width:200px;height:200px;background:red}')); //IE不支持
document.getElementsByTagName('head')[0].appendChild(style);
}

function insertRule(sheet,selectorText,cssText,position){
//如果是非IE
if(sheet.insertRule){
sheet.insertRule(selectText+"{"+cssText+"}",position);
//如果是IE
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}