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

 

转载于:https://www.cnblogs.com/TiestoRay/archive/2012/09/27/2701340.html