HTML if语句，用于在CDN失败时加载本地JS / CSS

Question

When loading a CSS/JS file from CDN or any external server, it is possible (even with low probability) to miss the file due to external failure. 从CDN或任何外部服务器加载CSS / JS文件时，由于外部故障，有可能（即使可能性很小）丢失该文件。 In this case, the html page will be corrupted in the lack of appropriate CSS and JS. 在这种情况下，缺少适当的CSS和JS会损坏html页面。

Is there a practical approach to load a local version upon CDN failure? 有没有可行的方法来在CDN失败时加载本地版本？

<link rel="stylesheet" href="http://cdn.com/style.css" type="text/css" />
IF (not loaded style.css){
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
}

It would be easier to do this for JS, as we can test a JS function (provided in the JS file); 对于JS而言，这样做更加容易，因为我们可以测试JS函数（在JS文件中提供）； then, loading the local file upon failure. 然后，在失败时加载本地文件。 For example, testing, if jQuery library is available. 例如，测试jQuery库是否可用。

However, I am curious to know if there is a practical method for this! 但是，我很想知道是否有可行的方法！

Answer 1

I would do it this way. 我会这样做。

Create a class within your stylesheet ui-helper-hidden and then add a div as the first element on your page; 在ui-helper-hidden样式表中创建一个类，然后将div作为页面上的第一个元素添加；

<body><div class="ui-helper-hidden"></div><!-- rest of html --></body>

After you have checked to make sure your CDN javascript file has been loaded, then use this bit of code note i am using jquery 在检查以确保您的CDN javascript文件已加载后，请使用以下代码说明我正在使用jquery

<script>
    // CSS Fallback
    $(function () {
        if ($('.ui-helper-hidden:first').is(':visible') === true) {
            $('<link rel="stylesheet" type="text/css" href="/pathtocss/nameofstylesheet.css" />').appendTo('head');
        }
    });
</script>

This will check to see if the element which should be hidden is or not. 这将检查要隐藏的元素是否存在。 If it isnt hidden, then you know your css file has not loaded from the CDN. 如果未隐藏，则说明您的CSS文件尚未从CDN加载。

I use this method for jQuery and jQuery UI via a CDN 我通过CDN将这种方法用于jQuery和jQuery UI

Answer 2

For Javascript, you can listen for the onload and onerror events when building a dynamic script. 对于Javascript，可以在构建动态脚本时侦听onload和onerror事件。 However, in those same pages, it shows otherwise for CSS. 但是，在这些页面中，对于CSS则显示其他内容。

The only reliable way to dynamically load CSS is to do it via AJAX. 动态加载CSS的唯一可靠方法是通过AJAX进行。 You could load the styles via dynamic link tags but without those events, you won't know if they have been loaded at all. 您可以通过动态链接标签加载样式，但是如果没有这些事件，则根本无法知道是否已加载样式。 You could poll for the styles, but it's hackish IMO. 您可以轮询样式，但是它是不可靠的IMO。

Another way to do it is make the server read those CDN files. 另一种方法是使服务器读取这些CDN文件。 If they're good, print the urls for the links. 如果效果很好，请打印链接的网址。 But if those links are dead, make it print the local urls instead. 但是，如果这些链接无效，则改为打印本地网址。 This would be more reliable, and offloads your logic to the server. 这将更加可靠，并将您的逻辑转移到服务器上。 This assumes that you have access to the server. 这假设您有权访问服务器。

Or better, use the local versions in the first place! 或者更好的是，首先使用本地版本！ With good caching, bandwidth won't be an issue 有了良好的缓存，带宽就不会成为问题

HTML if语句，用于在CDN失败时加载本地JS / CSS

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-05-21 15:52:45

解决方案2
1 2012-05-21 15:47:29

HTML if语句，用于在CDN失败时加载本地JS / CSS

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-05-21 15:52:45

解决方案2 1 2012-05-21 15:47:29

解决方案1
5 已采纳 2012-05-21 15:52:45

解决方案2
1 2012-05-21 15:47:29