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 之前，它会“异步”加载它。还有其他选择还是我document.write()在 2019 年末继续摇摆不定？

Answer 1

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

此代码段将条件加载包装在立即执行的匿名函数中：

(myScripting => {

    if (!window.$) { 

      let j = document.createElement('script');    

      j.src = '//code.jquery.com/jquery-3.4.1.slim.min.js'; 

      document.querySelector('head').appendChild(j);

      setTimeout( myScripting, 200 );

    } else {

      myScripting();

    }

})(JqIsLoadedSoMyScriptingCanStart);

// put your main scripting in here

function JqIsLoadedSoMyScriptingCanStart() {

  // extra check

  if (!window.$) {

    alert("Sorry, JQuery is not loaded, can't continue");

    return;

  }

  console.log("JQuery in place?");

  console.log($("head script")[1]);

}

<script src="cantLoadThis"></script>

Answer 2

将使用 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

});

};

在onreadystatechange中将 jQuery 附加到您的文档中

document.onreadystatechange = function () {

 if (document.readyState == "complete") {

    // document is ready. 

    document.head.appendChild(jQuery1);

 }

 }