JS动态载入外部JS文件

我们经常把一大堆的JS文件在页面载入的时候就全部载入，可这样就造成了页面载入速度慢，用到的时候才载入才是最好的。

    按需载入有许多种写法，比如document.writeln("<script src='js.js' tyep='text/jsvascript'></sc"+"ript>")，但是这种写法只适合首次载入或者需要添加iframe，不是很好。

   将js做为一个DOM节点对象引入无疑是最好的选择，比如：

  
    

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

    _script .type = "text/javascript";

    _script .src = "js.js";

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

  

    以前我都是这么做的，如果没马上执行里面的方法的话，有足够的时间给IE载入和解析文件的话那么是不会出错（以前都没马上执行）。

    如果马上执行里面的方法的话，在FF下是不会出错，FF会先将文件载入并解析完毕后才执行，而IE却是同步的，它会在载入的同时就往下执行了，所以就会报错。

    解决方法，使用AJAX读取外部JS内容：

   

//外部引入SCRIPT，如果SRC已存在不加入，不存在加入
//参数: src -> JS的路径, evtFun -> 载入后需要执行的事件方法名
function appendScript(src, evtFun)
{
    //取得页面上所有的SCRIPT元素
    script = document.getElementsByTagName("script");
    //外部引入SCRIPT，如果SRC已存在不加入，不存在加入
    for (var i = 0; i < script.length; i++)
    {
        if (script[i].getAttribute("id") == src)
        {
            if (evtFun)
            {
                evtFun();
            }
            return;
        }
    }
    
    //外部引入JS通过AJAX取回
    function getScript(result)
    {
        var jsCode = result.responseText;
        var _script = document.createElement("script");
        _script.setAttribute("language", "javascript");
        _script.setAttribute("type", "text/javascript");
        _script.setAttribute("text", jsCode);
        _script.setAttribute("id", src);
        document.getElementsByTagName("head")[0].appendChild(_script);
        if (evtFun)
        {
            evtFun();
        }
    }
    
    //AJAX读取引入的JS内容
    AjaxPost(src, null, getScript});
} 

//调用方法

function do()
{
    function show()
    {
        abc();         //abc为js.js内的一个方法
    }
    
    appendScript("js.js", show);            //参数：地址，事件
}

  

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/pippe/archive/2008/03/14/2183672.aspx