同步动态加载JavaScript

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (12)

我正在使用模块模式,我想要做的事情之一就是动态地包含一个外部JavaScript文件,执行该文件,然后在return { }模块中的文件中使用函数/变量。

我无法弄清楚如何轻松做到这一点。有没有执行伪同步外部脚本加载的标准方法?

function myModule() {
    var tag = document.createElement("script");
    tag.type = "text/javascript";
    tag.src = "http://some/script.js";
    document.getElementsByTagName('head')[0].appendChild(tag);

    //something should go here to ensure file is loaded before return is executed

    return {
        external: externalVariable 
    }
}
提问于
用户回答回答于

同步加载和执行脚本资源的方法只有一种,即使用同步XHR

这是如何做到这一点的一个例子

// get some kind of XMLHttpRequest
var xhrObj = createXMLHTTPObject();
// open and send a synchronous request
xhrObj.open('GET', "script.js", false);
xhrObj.send('');
// add the returned content to a newly created script tag
var se = document.createElement('script');
se.type = "text/javascript";
se.text = xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(se);

但是你不应该在一般情况下使用同步请求,因为这会阻止其他任何事情。但是,这就是说,当然有适合的情况。

尽管使用onload处理程序,我可能会将包含的函数重构为异步模式。

用户回答回答于

同步加载文件与同步执行文件不同 - 这是OP所要求的。

接受的答案会加载文件同步,但除了将附加脚本标记添加到DOM之外没有其他任何限制。仅仅因为appendChild()已经返回并不能保证脚本已经完成执行,并且它的成员被初始化以供使用。

唯一的(见警告)方法来实现OP的问题是同步加载脚本通过XHR说明,然后阅读文本并传递到eval()或一个新的函数()调用,并等待该函数返回。这是保证脚本同步加载执行的唯一方法。

我不会评论这是从UI还是从安全角度来看是明智的做法,但肯定有用例证明同步加载和执行是合理的。

扫码关注云+社区