Javascript：执行功能之前等待脚本同步加载的最佳方法？

Question

我有以下问题：我在模式对话框中加载页面。 此页面使用jQuery作为依赖项。 由于我已经在主页上使用jQuery，因此对我来说，它始终可用。 现在我们有了用例，如果需要的话，不同的页面（位于不同的域上）也需要加载该页面。

因此，我检查此页面上是否存在jQuery变量，如果是，请继续执行我的代码。

如果不存在，则在模板顶部，我动态创建一个脚本元素，如下所示：

<script>
if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = "path/to/jQuery";
   document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

在模板的末尾，我使用了IIFE（确定了jquery变量的范围）

(function ($) {
.... code ....
})(jQuery);

但是，由于使用此方法，脚本被异步加载，有时会出现错误：jQuery未定义。

现在，我通过同步加载来启动，如下所示：

    var xhrObj = new XMLHttpRequest();
    // open and send a synchronous request
    xhrObj.open('GET', "jquery.min.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.getElementById('placeholder').appendChild(se);

这可以正常工作，但是警告“不赞成在主线程上使用同步XMLHttpRequest，因为它对最终用户的体验有不利影响。” 让我思考。

但是，现在我更改了代码，只是说

if (!window.jQuery) {
    document.write('<scr' + 'ipt src="jquery.js"' + '>' + '</scr' + 'ipt>');
}

在我的模板顶部。

尊敬的javascript专家，这是可靠的解决方案吗？

Answer 1

在异步javascript中使用onload属性

<script async src="siteScript.js" onload="window.MyInitialisation()"></script>

在javascript中，它看起来像这样：

<script>
if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.async = "async";
   script.defer = "defer";
   script.onload = function() {window.MyInitialisation()}
   script.src = "path/to/jQuery";
   document.getElementsByTagName('head')[0].appendChild(script);
}
</script>