如果 CDN 在不使用 document.write() 的情况下失败，如何加载本地静态文件？

Question

我想要完成的事情

---

我将在 LAN 上为最多 50 人托管一个 Web 应用程序。局域网外的任何人都不会访问 Web 服务器。现在，我的 Web 应用程序使用 CDN 来交付 Bootstrap 和 jQuery 以及其他一些东西。我想让 Web 应用程序回退到 CDN 文件的本地静态副本，以防出现问题。

我的问题

---

1. 如果我的 Web 服务器仅由 LAN 上的用户使用，哪种方法更好：CDN 或本地文件？
2. 如何不使用使用document.write()回退到本地文件？

注意：我并不是只为 jQuery 来实现这一点。我想对几个文件执行此操作。

相关的 SO 问题

---

我查看了回答我正在尝试做的其他问题的几十个问题，下面列出了最受欢迎的问题。

1. Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
2. How to load local script files as fallback in cases where CDN are blocked/unavailable?
3. Is Google’s CDN for jQuery available in China?

我的尝试

---

我从问题（1）中实现了以下代码

<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
 <script>
     console.log(window.jQuery) // ==> undefined
     window.jQuery || document.write('<script type="text/javascript" src="{% static "js/jquery-3.4.1.min.js" %}"><\/script>');
     console.log(window.jQuery) // ==> undefined
 </script>

但是这个解决方案：

1. 加载文档失败
2. 导致 Google Chrome DevTools 声明以下内容

[Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write
[Violation] Parser was blocked due to document.write(<script>)

这让我想到了题为 A Parser-blocking, cross-origin script is invoked via document.write - how to circumvent it? 的 SO 问题。然后我尝试实现接受的解决方案并将async 附加到我的代码中

<script>
   console.log(window.jQuery) // ==> undefined
   window.jQuery || document.write('<script type="text/javascript" src="{% static "js/jquery-3.4.1.min.js" %}" async><\/script>');
   console.log(window.jQuery) // ==> undefined
</script>

但它仍然无法加载文档，我再次收到以下错误：

[Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write.

总结

---

那么实现这一目标的正确方法是什么？如何在不使用 document.write() 的情况下执行此操作？似乎以前问题的答案现在已经过时了。

Answer 1

您应该监听 onerror 事件，如果发生则加载本地事件。
这是一个示例（您应该更改代码以适合您的情况）：

<script>
    function onJqueryLoadError()
    {
        document.write('<scr' + 'ipt src="static/jquery-3.4.1.min.js"></scr' + 'ipt>');
    }
</script>
<script src="https://www.cdn/jquery-3.4.1.min.js" onerror="onJqueryLoadError()"></script>