当 CDN JS Cloudflare 不可用时，Lightbox2 回退

lightbox2 fallback when cdn js cloudflare is unavailable

本文关键字：Lightbox2 回退 CDN JS Cloudflare      更新时间：2023-09-26

我正在通过以下 CDN //cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js加载灯箱2

如果这不可用，那么我想回退到我的核心文件。如何检查是否已定义灯箱以避免加载我的核心文件。

我尝试了typeof lightbox === "undefined"但这总是返回 true，强制加载我的核心文件。

我已经有 jquery、angular 等的回退 - 它是 lightbox2，我在检查它是否已加载时遇到问题。

是的，这里的问题是全局范围内没有任何内容，因为灯箱不会向其添加任何内容。(请参阅此SO问题(。这就是为什么你不能像window.lightbox一样测试它.

解决方法是使用 ajax 请求加载脚本，如下面的演示所示。getScript 方法是一个简写的 Ajax 函数(有关详细信息，请参阅此处(。

在那里，您有一个失败回调，如果 cdn 加载失败，您可以在其中将本地脚本添加到 DOM。

您可以对从 cdn 加载的任何文件(例如灯箱的样式表(执行相同的操作。

var addLocalScript = function (src) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = src; // use this for linked script
    //script.text = "alert('voila!');" // use this for inline script
    document.body.appendChild(script);
};
$(function () {
    var url = 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js';
    $.getScript(url)
        .done(function (script, textStatus) {
        console.log(textStatus);
    })
        .fail(function (jqxhr, settings, exception) {
        console.log('cdn load failed');
        //add local script
        addLocalScript('js/lightbox/lightbox.min.js');
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://lorempixel.com/400/200" data-lightbox="image-1" data-title="My caption"><img src="http://lorempixel.com/400/200"/></a>

相关文章：