javascript基础：动态加载脚本和样式

一、动态加载js代码或脚本

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

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

方法一：通过内联的方式动态加载js代码

var flag = true;//设置一个是否加载js脚本的标记,当需要加载的时候设置为true；
if(flag){
    //加载js的代码
    var text = document.createTextNode("alert('lee')");
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.appendChild(text);//IE是不支持script元素的append child方法的
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
}

PS:IE浏览器认为script是特殊元素,不能在访问子节点。为了兼容,可以使用text属性来代替。

script.text = "alert('')"; //IE 可以支持了。

 

方法二：通过连接的方式动态加载js脚本

var flag = true;//设置一个是否加载js脚本的标记，当需要加载的时候设置为true；
if(flag){
    loadScript('xxx.js');
}
//加载js脚本的方法
function loadScript(jsUrl){
    //加载js脚本
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = jsUrl;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
}

二、动态样式

为了动态的加载样式表 ,比如切换网站皮肤 。样式表有两种方式进行加载 ,一种是标签,一种是