【问题标题】: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 放到一个函数中,并对您首选的分析提供程序进行事件调用,以便您可以跟踪您的网站何时回退到外部脚本的本地副本,而不是而不是默默地这样做。

    【讨论】:

      猜你喜欢
      • 2021-08-06
      • 1970-01-01
      • 2018-02-11
      • 1970-01-01
      • 2014-07-02
      • 2021-09-02
      • 1970-01-01
      • 2011-10-26
      • 2022-01-12
      相关资源
      最近更新 更多