动态加载JavaScript文件

更新: jQuery-less版本:

我做的基本上与你做亚当的事情相同,但稍加修改以确保我附加到head标签以完成工作.我只是创建了一个include函数(下面的代码)来处理脚本和css文件.

此函数还会检查以确保尚未动态加载脚本或CSS文件.它不检查手动编码值,并且可能有更好的方法来做到这一点,但它达到了目的.

function include( url, type ){
    // First make sure it hasn't been loaded by something else.
    if( Array.contains( includedFile, url ) )
        return;

    // Determine the MIME-type
    var jsExpr = new RegExp( "js$", "i" );
    var cssExpr = new RegExp( "css$", "i" );
    if( type == null )
        if( jsExpr.test( url ) )
            type = 'text/javascript';
        else if( cssExpr.test( url ) )
            type = 'text/css';

    // Create the appropriate element.
    var tag = null;
    switch( type ){
        case 'text/javascript' :
            tag = document.createElement( 'script' );
            tag.type = type;
            tag.src = url;
            break;
        case 'text/css' :
            tag = document.createElement( 'link' );
            tag.rel = 'stylesheet';
            tag.type = type;
            tag.href = url;
            break;
    }

    // Insert it to the  and the array to ensure it is not
    // loaded again.
    document.getElementsByTagName("head")[0].appendChild( tag );
    Array.add( includedFile, url );
}

另一个很棒的答案

$.getScript("my_lovely_script.js", function(){


   alert("Script loaded and executed.");
  // here you can use anything you defined in the loaded script

 });

/sf/ask/17360801/

以下是我发现的一些示例代码...有没有人有更好的方法？

  function include(url)
  {
    var s = document.createElement("script");
    s.setAttribute("type", "text/javascript");
    s.setAttribute("src", url);
    var nodes = document.getElementsByTagName("*");
    var node = nodes[nodes.length -1].parentNode;
    node.appendChild(s);
  }

如果你已经加载了jQuery,你应该使用$ .getScript.

这比其他答案有一个优势,因为你有一个内置的回调函数(以保证在依赖代码运行之前加载脚本),你可以控制缓存.