JS动态添加样式和脚本

在IE下style和script是特殊的元素，DOM无法访问其子节点，所以脚本和样式的动态生成需要考虑对IE的特殊处理

对于样式，如果内容较少，或者不想放到文件中，可以使用Dom.style.cssText来批量设置。

Style

//加载样式内容

function loadStyle(styleText){

    var s = document.createElement("style");

    s.type = "text/css";

    try{//IE

        s.styleSheet.cssText = styleText;

    }catch(e){//FF Chrome

        s.appendChild(document.createTextNode(styleText));

    }

    document.getElementsByTagName("head")[0].appendChild(s);

}



//加载样式文件

function loadStyleFile(url){

    var s = document.createElement("link");

    s.href = url;

    s.type = "text/css";

    s.rel = "stylesheet";

    document.getElementsByTagName("head")[0].appendChild(s);

}

loadStyle("*{margin:0px;}");

loadStyleFile("../CSS/Common.css");

 

Script

动态加载脚本内容

//现在很多情况下都会需要按需加载脚本文件，所以动态加载脚本还是比较有意义的



//加载脚本内容

function loadScript(scriptText){

    var s = document.createElement("script");

    s.type = "text/javascript";

    try {//IE

        s.text = scriptText;

    } catch (e) {//FF Chrome

        s.appendChild(document.createTextNode(scriptText));

    }

    document.body.appendChild(s);

}



loadScript("function test(){alert(123);}");

 动态加载脚本文件时，涉及到一个加载结束后回调函数的问题

在FF，Chrome，高版本IE(9+)中，script的Dom对象是支持onload和onerror方法的，但是IE7,IE8则不支持

具体解决方式是利用onreadystatechange来监听文件加载状态的变化。

script.onreadystatechange = function () {

    if (script.readyState == '某个值') {

        // do something

    }

}

此时 readyState 的值  可能为 以下几个 :

• “uninitialized”  原始状态 
• “loading”        下载数据中
• “loaded”         下载完成
• “interactive”    还未执行完毕
• “complete”      脚本执行完毕

 整理之后 文件动态加载的方法如下

//加载脚本文件

function loadScriptFile(url, callback) {

    var script = document.createElement("script");

    script.src = url;

    script.type = "text/javascript";

    if (callback) {

        if ("onreadystatechange" in script) {

            script.onreadystatechange = function () {

                if (/loaded|complete/.test(script.readyState))

                    callback();

            }

        } else {

            script.onload = callback;

        }

    }

    document.body.appendChild(script);

}

loadScriptFile("/Scripts/jquery.min.js", someFunction);

 

 

---

部分内容引自 http://www.cnblogs.com/_franky/archive/2010/06/20/1761370.html