时间戳

首页 > 解决方案 > Javascript 文件加载回退。替代 document.write()

javascript - Javascript 文件加载回退。替代 document.write()

问题描述

您可能熟悉良好的旧 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()失败并显示“<em>$ is not defined”。

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 年底继续摇摆？

标签： javascriptjquerydocument.writefallback

解决方案

加载和解析 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>

推荐阅读