如果CDN加载失败，我该如何本地加载资源？

Question

我在使用Bootstrap + jQuery从CDN加载时遇到了问题，有时候它无法从CDN加载/导入。 例如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

当打开网站时，它没有被加载。我想做的是在我的服务器上添加相同的文件，以便如果从 Google 服务器无法上传，则从我的服务器加载该文件。 例如：

<link rel="stylesheet" href="#mydomain#/css/bootstrap.min.css">

如何在不重复加载CDN资源的情况下实现上述操作（是否有更好的方法来实现此操作？）谢谢。

- DirWolf

---

可能是为CDN提供本地回退的重复问题。 - Alex

为什么你不总是从你的服务器加载？ - executable

我已经删除了所有标签并添加了Javascript，因为您不想使用jQuery，而且问题与html或css无关。 - Reinstate Monica Cellio

你可以检查jQuery是否已加载（https://dev59.com/tWs05IYBdhLWcg3wQvyq），如果没有加载，你可以从服务器获取它。 - executable

太棒了，谢谢大家。我现在明白了。我搜索的时候没有找到答案，但现在我找到了。 - DirWolf

Answer 1

这段代码将处理脚本加载失败，并允许您添加一个备用属性来代替加载...

var scripts = document.querySelectorAll("script[data-fallback]");

[].forEach.call(scripts, function(script) {
  var listener = script.addEventListener("error", function() {
  var newScript = document.createElement("script");
  newScript.setAttribute("src", script.getAttribute("data-fallback"));
    document.querySelector("head").appendChild(newScript);
  });
});

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.fail"
  data-fallback="https://something-local.com/jquery.js"></script>

注意: 这在本页面上不起作用。这只是 Stack Overflow 片段的性质。这里提供一个有效的 jsfiddle 演示代替...

http://jsfiddle.net/ArchersFiddle/pbfv6q4x/

如果您在该页面上打开控制台，您将看到原始脚本加载错误，然后输出显示备用脚本已加载。

以下是同样的内容，但适用于样式表...

var stylesheets = document.querySelectorAll("link[rel=stylesheet][data-fallback]");

[].forEach.call(stylesheets, function(stylesheet) {
    var listener = script.addEventListener("error", function(e) {
    var newStylesheet = document.createElement("link");
    newStylesheet.setAttribute("rel", "stylesheet");
    newStylesheet.setAttribute("href", stylesheet.getAttribute("data-fallback"));
    document.querySelector("head").appendChild(stylesheet);
    });
});

- Reinstate Monica Cellio