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

二、动态样式

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

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

var flag = true;
if (flag) {
    var style = document.createElement('style');
    style.type = 'text/css';
    //var box= document.createTextNode(#box{background:red}'); //IE 不支持
    //style.appendChild(box);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);
    }
} 

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

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