Question

加载我的页面上的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);
};

从CDN为CSS提供本地回退

1 个答案: