备用 CSS 和 javascript 链接答案

【问题标题】：Alternate CSS and javascript link备用 CSS 和 javascript 链接
【发布时间】：2015-07-10 20:46:43
【问题描述】：

我想知道如果无法访问 CDN，是否可以提供备用链接。例如，对于 bootstrap，提供要从 CDN 下载的标签，如果无法访问，则提供本地存储的 bootstrap：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- if cannot be downloaded -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

我想使用这个模型，因为浏览器会缓存 CDN 文件，这样可以通过使用它来提高速度（而且它们的下载时间可能比我的服务器要好）。虽然如果有人通过本地网络连接但没有连接到互联网并且没有这些缓存版本之一，我想要一个替代方案。这可能吗？

【问题讨论】：

This might help
这个答案也是：stackoverflow.com/questions/22879099/…
@ODelibalta 看起来很 jQuery 特有，有没有更通用的方法可以检查引导程序？
我相信这可能是一个更有用的资源：@987654323@
@DevinH。完美的。您应该变成一个答案，以便我可以接受，因为其他两个答案都不是完整的

标签： javascript html css

【解决方案1】：

http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

该链接回答了问题的两个部分。

对于您的示例，使用 fallback.js：

HTML：

<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

JS：

cfg({
    "libs": {
        'css$bootstrap': {
            'exports': '.col-xs-12',
            'urls': 'css/bootstrap.min.css'
        },
        'bootstrapjs': {
            'urls': [
                'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js',
                'js/bootstrap.min.js'
            ]
        }        
    }
});

req(function(css$bootstrap, bootstrapjs){ //Everything is loaded });

上面的文章似乎有点过时了 fallback.js API，所以我已经包含了基于当前状态的示例。 https://github.com/dolox/fallback/blob/master/README.md

【讨论】：

【解决方案2】：

我刚刚将它用于我最近一直在构建的网站，如果这是您的想法，请告诉我：

<script type="text/javascript" async src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="/path/to/file"><\/script>')
    </script>

也许你可以使用类似的东西来加载你的引导程序，我会在男士时间进行更多研究，如果有帮助，请告诉我。

编辑：

还发现这个线程问题是别人提出的，可能有用：

how to fallback twitter-bootstrap cdn to local copy

【讨论】：

是的，想知道 Bootstrap 是否有解决方法，因为检查看起来是 jQuery 特定的。
刚刚编辑了我的帖子，您想要的是引导程序的 cdn 后备，但似乎没有对象，我链接到的线程给出了问题的答案。跨度>

【解决方案3】：

对于 css 部分，请在此处查看答案：How to implement a CDN failsafe for css files?

js部分见：Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail

TL;DR：

<link rel="stylesheet" type="text/css" href="cdnurl/styles.css" onload="alert('loaded')" onerror="javascript:loadCSSBackup()" />

<script type="text/javascript>
    function loadCSSBackup(){
        var css = document.createElement("link")
        css.setAttribute("rel", "stylesheet");
        css.setAttribute("type", "text/css");
        css.setAttribute("href", 'backup/styles.css');
        document.getElementsByTagName("head")[0].appendChild(css);
    }
</script>

对于加载后备 JS，您可以使用（取自上面的答案）：

<script type="text/javascript" async src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
        window.jQuery || document.write('<script src="/path/to/file"><\/script>')
</script>

【讨论】：