JavaScript代码分享: 动态载入CSS, 或JavaScript 脚本文件

20六/090

JavaScript代码分享: 动态载入CSS, 或JavaScript 脚本文件

玩玩动态载入吧, 记得 jQuery 里有个方法 jQuery.getScript(); 这个后面好像还带一个回调函数, 功能是很好, 很强大. 不过载入CSS的时候就没有提供类似的方法. 自己写了两个函数. 玩玩很有意思呢.

不过注意的是玩动态载入的话, 前提是你的网络带宽和服务器速度都不错, 如果网络太烂, 页面就乱糟糟了呢.

先来载入CSS的函数:

/**
 * 动态增加 CSS 样式表文件. 不会重复加载
 * 但在别处使用这个函数，这个js要先加载
 *
 * @param: string cssUri 载入的 CSS 样式表定义脚本路径.
 *
 * @author: Cai.Aimin
 * @email: cam_work@163.com
 * @since: 2008-03-05
 *
 * @return void
 */
function loadCss(cssUri) {
    if(!cssUri) return;
    var styles = document.getElementsByTagName("link");
    var len = styles.length;
    var isLoaded = false;
    for(var i=0; i &lt; len; i++) {
        if(cssUri == styles[i].getAttribute("href")) {
            isLoaded = true;
            break;
        }
    }
    if(!isLoaded) {
        var headObj = document.getElementsByTagName("head")[0];
        var cssLink = document.createElement("link");
        cssLink.setAttribute("rel", "stylesheet");
        cssLink.setAttribute("type", "text/css");
        cssLink.setAttribute("media", "screen");
        cssLink.setAttribute("href", cssUri);
        headObj.appendChild(cssLink);
    }
}

面这个是动态载入JavaScript脚本函数, 对js脚本载入前, 检查到已有的话就进行删除, 不然的话对新AJAX Loaded 进来的内容不能完成绑定操作. 当然重复载入浏览器是很懒的. 它会读取本地的缓存, 所以不需要担心重复读取服务器上的一段js脚本.

/**
 * 动态增加 JavaScript 脚本文件.
 * 但在别处使用这个函数，这个js要先加载
 *
 * @param: string jsUri 载入的 JavaScript 脚本路径.
 *
 * @author: Cai.Aimin
 * @email: cam_work@163.com
 * @since: 2008-03-05
 *
 * @return void
 */
function loadJs(jsUri) {
    if(!jsUri) return;
    var js = document.getElementsByTagName("script");
    var len = js.length;
    for(var i=0; i &lt; len; i++) {
        if(jsUri == js[i].getAttribute("src")) {
            js[i].parentNode.removeChild(js[i]);
            break;
        }
        var headObj = document.getElementsByTagName("head")[0];
        var jsLink = document.createElement("script");
        jsLink.setAttribute("type", "text/javascript");
        jsLink.setAttribute("src", jsUri);
       headObj.appendChild(jsLink);
    }
}