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

HTML if statement to load local JS/CSS upon CDN failure

本文关键字：加载 JS CSS 失败 语句 if 用于 CDN HTML      更新时间：2023-09-26

从CDN或任何外部服务器加载CSS/JS文件时，由于外部故障，也有可能(即使概率很小(丢失文件。在这种情况下，html页面将因缺少适当的CSS和JS而损坏。

是否有一种实用的方法可以在 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" />
}

对于JS来说，这样做会更容易，因为我们可以测试一个JS函数(在JS文件中提供(;然后，在失败时加载本地文件。例如，测试，jQuery库是否可用。

但是，我很想知道是否有实用的方法！

我会这样做。

在样式表ui-helper-hidden中创建一个类，然后添加一个div 作为页面上的第一个元素;

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

检查以确保您的 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>

这将检查应该隐藏的元素是否是。如果未隐藏，则表明您的 css 文件尚未从 CDN 加载。

我通过CDN将此方法用于jQuery和jQuery UI

。

对于 Javascript，您可以在构建动态脚本时侦听onload和onerror事件。但是，在那些相同的页面中，它以其他方式显示CSS。

动态加载CSS的唯一可靠方法是通过AJAX完成。您可以通过动态链接标签加载样式，但如果没有这些事件，您将不知道它们是否已加载。你可以轮询样式，但它是黑客IMO。

另一种方法是让服务器读取这些CDN文件。如果它们很好，请打印链接的 URL。但是，如果这些链接已失效，请使其打印本地URL。这会更可靠，并将逻辑卸载到服务器。这假定您有权访问服务器。

或者更好的是，首先使用本地版本！有了良好的缓存，带宽就不会成为问题

相关文章：