我通过以下 CDN 加载 lightbox2 //cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js
如果这不可用,那么我想回退到我的核心文件。如何检查 lightbox 是否已定义以避免加载我的核心文件。
我尝试了 typeof lightbox === "undefined"
但总是返回 true 强制加载我的核心文件。
我已经有 jquery、Angular 等的后备方案 - 我在检查 lightbox2 是否已加载时遇到问题。
最佳答案
是的,这里的问题是全局范围内没有任何内容,因为 lightbox 没有向其中添加任何内容。 (参见此SO question)。这就是为什么你不能像 window.lightbox
那样测试它。
解决方法是使用 ajax 请求加载脚本,如下面的演示所示。 getScript
方法是一个简写 Ajax 函数(有关详细信息,请参阅 here)。
这里有一个失败回调,如果 cdn 加载失败,您可以将本地脚本添加到 DOM。
您可以对从 CDN 加载的任何文件(例如 lightbox 的样式表)执行相同的操作。
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>
关于javascript - 当 cdn js cloudflare 不可用时 lightbox2 回退,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27534095/