如果 popper.js 无法加载，使用备选方案

Question

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

Bootstrap 4需要Popper并且必须首先加载。我想使用与下面相同的bootstrap回退技术，以便如果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>

- Matt Parkins

Answer 1

检查Popper变量。

如果其类型为"undefined"，则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（即从 www.mydomain.com 上引用 static.mydomain.com 上的脚本），那么 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 放入一个函数中，并通过事件调用您偏爱的分析提供商，以便您可以跟踪您的站点何时退回到外部脚本的本地副本，而不是只是默默地这样做。

- Matt Parkins