javascript - 如果 popper.js 无法加载则回退

Question

如何测试 popper.js 是否已加载，以便我可以从 CDN 回退到本地副本？

Popper 是 Bootstrap 4 所必需的，必须首先加载。我想使用我在下面使用的相同引导回退技术，这样如果 popper.js CDN 失败，浏览器回退到从我的服务器加载 popper.js。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="local/bootstrap.min.js"><\/script>')}</script>

Answer 1

检查 Popper 变量。

如果它的类型是“未定义”那么它 Popper 加载失败，你可以回退到本地副本:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>
<script>if(typeof(Popper) === 'undefined') {document.write('<script src="static/lib/popper.min.js"><\/script>')}</script>

--

2019 年 2 月更新

自从 Chrome >55 现在“干预”一些包含脚本标签的 document.write(例如 2G 移动设备上的用户)，但是，如果 document.write 引用相同的域或 TLD+1(即，脚本static.mydomain.com 从 www.mydomain.com 上的 html 文件中引用)，那么 Chrome 将不会干预并停止脚本下载。所以现在上面的方法工作正常。我还稍微改进了代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script>window.Popper || document.write('<script src="static/lib/popper.min.js"><\/script>')</script>

要考虑的另一项更改是将 document.write here 放入一个函数中，并对您首选的分析提供程序进行事件调用，以便您可以跟踪您的网站何时回退到外部脚本的本地副本，而不是而不是默默地这样做。