JS动态载入外部JS文件

来源:互联网 发布:dnf内存优化 编辑:程序博客网 时间:2024/05/16 00:42

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

    按需载入有许多种写法,比如document.writeln("<script src='js.js' tyep='text/jsvascript'">),但是这种写法只适合首次载入或者需要添加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);            //参数:地址,事件
}

 

原创粉丝点击