javascript - 从 CDN 为 CSS 提供本地回退

Question

我正在从 CDN bootstrapcdn.com在我的页面上加载 Bootstrap CSS

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

如何测试样式表是否已加载，如果不提供本地回退？

在进行测试之前，我不想等待 jQuery 或其他库加载；我希望首先在页面上加载所有 CSS。

Answer 1

这是我为我们的需要而创造的。如果这满足您的需求，只需调用函数 ensureCssFileInclusion(要检查的文件，布尔值)。您必须根据需要对其进行调整，以确保在此函数中提供 cssFileToCheck、fallbackCssFile。

/**
 * Checks the page for given CSS file name to see if it was already included within page stylesheets.
 * If it was, then this function does nothing else. If CSS file was not found among page stylesheets,
 * then this function will attempt to load the stylesheet by adding an HTML link tag to the document
 * HEAD section. You must also specify whether given cssFileToInclude is a relative path or an absolute path.
 */
ensureCssFileInclusion = function(cssFileToInclude, isRelativePath) {
   if (isRelativePath) {
     if (!window.location.origin) {
        cssFileToInclude = window.location.protocol+"//"+window.location.host + cssFileToInclude;
     }
   }
   var styleSheets = document.styleSheets;
   for (var i = 0, max = styleSheets.length; i < max; i++) {
     if (styleSheets[i].href == cssFileToInclude) {
        return;
     }
   }
   // because no matching stylesheets were found, we will add a new HTML link element to the HEAD section of the page.
   var link = document.createElement("link");
   link.rel = "stylesheet";
   link.href = cssFileToInclude;
   document.getElementsByTagName("head")[0].appendChild(link);
};