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

时间:2017-11-02 14:36:48

标签: javascript bootstrap-4 cdn fallback popper.js

如何测试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>

1 个答案:

答案 0 :(得分:7)

检查Popper变量。

如果其类型为&#34;未定义&#34;那么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&gt; 55现在&#34;介入&#34;在某些document.writes上包含脚本标记(例如2G mobile上的用户),但是,如果document.write引用相同的域或TLD + 1(即,从html文件引用的static.mydomain.com上的脚本) www.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置于函数中并向首选分析提供程序进行事件调用,以便您可以跟踪站点何时回退到外部脚本的本地副本,而不是而不是只是默默地这样做。