cdn服务器关闭时如何加载引导css的本地副本？答案

【问题标题】：How to load local copy of bootstrap css when the cdn server is down?cdn服务器关闭时如何加载引导css的本地副本？
【发布时间】：2012-12-17 23:17:01
【问题描述】：

到目前为止，我正在像这样使用 javascript

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script>    $.fn.modal || document.write('<script src="js/bootstrap.min.js">\x3C/script>')</script>

我正在像这样从 bootstrapdn 加载 bootstrap.css

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

如果cdn服务器关闭，谁能告诉我如何加载本地副本。？

【问题讨论】：

我只是假设如果缺少 js，那么 css 也可能丢失。
您在使用服务器端脚本吗？您可以根据布尔 (true|false) 结果执行 http 请求和简单的 if 语句。因此，您可以将本地版本设置为默认故障转移。
@KevinB 好点。谢谢
看看这个问题：stackoverflow.com/questions/5257923/…
假设如果 bootstrap js 加载正常，那么 bootstrap css 也会正常加载，这会产生很小的意外：如果 JS 被 CDN 管理员意外删除...

标签： jquery css twitter-bootstrap cdn

【解决方案1】：

对文件执行 jquery.Get() 会起作用吗？根据结果，您将知道它是否可用。并且看到它发生在客户端，本地缓存将使这对于额外带宽来说不是问题。

【讨论】：

【解决方案2】：

对此我的解决方案是在主体顶部使用引导隐藏类样式创建一个空 div：

<div id="bootstrapCssTest" class="hidden"></div>

然后用 Javascript 对其进行测试，如果 div 可见，则将其附加到头部：

    <script type="text/javascript">

    if ($('#bootstrapCssTest').is(':visible') === true) {
        $('<link href="/localcopy/css/bootstrap.css" rel="stylesheet" type="text/css" />').appendTo('head');
    }
</script>

【讨论】：

【解决方案3】：

This gist 有一个代码 sn-p，我发现它对于检测是否需要加载 CSS 回退非常有用。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />

<script type="text/javascript">
    function cssLoaded(href) {
        var cssFound = false;

        for (var i = 0; i < document.styleSheets.length; i++) {
            var sheet = document.styleSheets[i];
            if (sheet['href'].indexOf(href) >= 0 && sheet['cssRules'].length > 0) {
                cssFound = true;
            }
        };

        return cssFound;
    }

    if (!cssLoaded('bootstrap-combined.min.css')) {
        local_bootstrap = document.createElement('link');
        local_bootstrap.setAttribute("rel", "stylesheet");
        local_bootstrap.setAttribute("type", "text/css");
        local_bootstrap.setAttribute("href", "/Content/Styles/bootstrap-combined.min.css");
        document.getElementsByTagName("head")[0].appendChild(local_bootstrap);
    }
</script>

只需将 /Content/Styles/bootstrap-combined.min.css 替换为您本地 css 的正确路径，就可以了

【讨论】：

对另一个域的 CSS 文件使用sheet['cssRules'] 是跨域访问，这被认为是一个安全问题。 Chrome 不允许，Firebug 会抛出错误。

【解决方案4】：

试试这个，

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script>
    function cssLoaded(href) {
        var cssFound = false;
        for (var i = 0; i < document.styleSheets.length; i++) {
            var sheet = document.styleSheets[i];
            if (
            sheet['href'] == "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" ||
            sheet['href'] == "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css") {
                cssFound = true;
            }
        };
        return cssFound;
    }
    if (!cssLoaded('bootstrap.min.css')) {
        local_bootstrap = new CustomEvent('link');
        local_bootstrap.setAttribute("rel", "stylesheet");
        local_bootstrap.setAttribute("href", "/css/bootstrap.min.css");
        document.getElementsByTagName("head")[0].appendChild(local_bootstrap);
    }
</script>

Source

【讨论】：