【问题标题】:Fallback if popper.js fails to load如果 popper.js 无法加载,则回退
【发布时间】:2017-11-02 14:36:47
【问题描述】:
如何测试 popper.js 是否已加载,以便我可以从 CDN 回退到本地副本?
Bopper 是 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>
【问题讨论】:
标签:
javascript
bootstrap-4
cdn
fallback
popper.js
【解决方案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 放到一个函数中,并对您首选的分析提供程序进行事件调用,以便您可以跟踪您的网站何时回退到外部脚本的本地副本,而不是而不是默默地这样做。