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>