Question

我想知道如果无法联系到CDN，是否可以提供备用链接。例如，bootstrap提供从CDN下载的标签，如果无法访问，则提供本地存储的引导程序：

<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文件，因此可以通过使用它来提高速度（它们的下载时间也可能比我的服务器更好）。虽然有人通过本地网络连接但没有连接到互联网并且没有这些缓存版本之一，我想要一个替代方案。这可能吗？

Answer 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

Answer 2

我刚将这个用于我最近一直在建设的网站，请告诉我这是否是您的想法：

zip

也许你可以使用类似的东西加载，我会在男性时间看一下它，让我知道它是否有帮助。

编辑：

还发现了其他人制作的这个帖子问题，可能有用：

how to fallback twitter-bootstrap cdn to local copy

Answer 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>

替代CSS和JavaScript链接

3 个答案: