javascript - 如果我使用 appendChild() 或 jQuery.append()，动态加载 JavaScript 文件是不同的

Question

我尝试通过向 head 元素添加脚本元素来动态加载 JavaScript 文件，之后我测试该文件中是否存在定义的函数以检查加载是否成功。

如果我使用这段代码:

var scriptElem = document.createElement("script");
scriptElem.type = "text/javascript";
scriptElem.src = 'myfile.js';
document.getElementsByTagName('head')[0].appendChild(scriptElem);

新函数之后没有定义。但是，如果我更改最后一行以使用 jQuery，如下所示:

$('head').append($(scriptElem));

是的。作为另一个线索，在第一种情况下，Firebug 在 HTML 选项卡中显示新的脚本元素，而在第二种情况下则不会。

我曾尝试使用 jQuery.getScript() 来执行此操作，但这也不起作用。此外，如果它是相关的，则调用是从通过以下方式提供给 jQuery 的函数进行的:

$(document).ready();

谁能解释一下这是怎么回事？

Answer 1

看起来 jQuery 可能会给您一些帮助。从我的黑客， $('head').append(scriptElem);确实附加了脚本，但它不会立即解析它。所以如果你把一个叫做“function something(){};”的函数放在里面然后使用 JQuery append() 方法在下一行定义它，但不使用 native appendChild。 (正如您所描述的那样。)但是，如果您输入 setTimeout(function(){alert(something)},1);然后它被定义。看起来 JQuery 正在设法附加脚本标记，但也强制浏览器立即解析它。

关键似乎在JQuery source code 的domManip 函数中其中包含以下行:

if ( scripts ) {
   jQuery.each( scripts, evalScript );
}

然后转到这个:

function evalScript( i, elem ) {
    if ( elem.src ) {
        jQuery.ajax({
            url: elem.src,
            async: false,
            dataType: "script"
        });
    } else {
        jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );
    }

    if ( elem.parentNode ) {
        elem.parentNode.removeChild( elem );
    }
}

因此 JQuery 将脚本标记追加视为一种特殊情况，而其他一些 JQuery 魔术会同步评估它们，因此您的函数立即可用。