JavaScript文件加载回退。替代document.write（）

Question

您可能熟悉旧的良好的Jquery负载回退：

<script>window.jQuery || document.write('<script src="https://example.com/jquery.js"></script>')</script>

但是我在这里和那里读过：请勿使用document.write，对您的健康不利，它在Chrome上不起作用（对我来说，Chrome 78）。因此，我正在尝试替换它，但是在触发DOM加载之前，我找不到能够同步加载新js文件的解决方案。用DOM操作替代方法结束的是，浏览器认为DOM已加载，并且所有$(document).ready()都失败，并带有“ $未定义”。

function Jqfallback() { 
    var j = document.createElement('script');    
    j.src = 'https://example.com/jquery.js'; 
    document.getElementsByTagName('head')[0].appendChild(j); 
}
(window.jQuery || Jqfallback() );

无论我将该脚本或新的JS文件放在哪里，在这种情况下，('head')[0]都已位于正文中所有其他JS之前，因此它会“异步地”加载它。

还有其他选择还是我在2019年末继续摇摆document.write()？

Answer 1

将使用jQuery的代码放在onload（）函数中。

var jQuery1 = document.createElement('script');
jQuery1.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";

jQuery1.onload = function () {
        var $ = window.jQuery;
        $.when(
               $.getScript("https://someOtherScript.js"),  //if you need
               $.Deferred(function (deferred) {
               $(deferred.resolve);
        })
        ).done(function () {
        console.log("all scripts loaded!!");
        doNextTask(); //some other code which uses jQuery
});
};

将jQuery附加到onreadystatechange中的文档中>

document.onreadystatechange = function () {
 if (document.readyState == "complete") {
    // document is ready. 
    document.head.appendChild(jQuery1);
 }
 }

Answer 2

加载和解析JQuery需要一些时间。因此，在追加脚本后，请使用（小）timeout