КАК проверить, загружен ли внешний (междоменный) CSS-файл с использованием Javascript

Question

У меня есть функция, выполняющая следующие действия с использованием javascript:

1. Создать элемент ссылки и установить href = cssFile.
2. Вставить элемент ссылки в тег head.
3. Создать элемент div.
4. Установить имя класса с помощью setAttribute
5. appendChild div для тела.
6. Теперь получаем значение правила CSS с помощью document.defaultView.getComputedStyle(divElement, null)[cssRule].

Теперь getComputedStyle возвращает значения по умолчанию, и если я жду на точку останова , используя Firebug до вызова getComputedStyle, то он возвращает правило CSS из введенного CSS.

С уважением,
Муним

Answer 1

Вы можете создать динамический URL-адрес CSS и извлечь CSS в виде обычного текста, используя обычный вызов ajax.

Затем используйте это для загрузки CSS:

function loadCss(cssText, callback){
    var style = document.createElement('style');
    style.type='text/css';
    if(callBack != undefined){
        style.onload = function(){
            callBack();
        };
    }
    style.innerHTML = cssText;
    head.appendChild(style);
}

И используйте это так:

loadCss(ajaxResponseText, function(){
    console.log("yaay css loaded, now i can access css defs");
})

Answer 2

Это на самом деле то, что я сделал.

Чтобы обеспечить загрузку определенного файла CSS, я добавил стиль в конец файла CSS. Например:

#ensure-cssload-8473649 {
  display: none
}

Теперь у меня есть функция JavaScript, которая запускает обратный вызов, указанный при загрузке вышеуказанного стиля на страницу:

var onCssLoad = function (options, callback) {
    var body = $("body");
    var div = document.createElement(constants.TAG_DIV);
    for (var key in options) {
        if (options.hasOwnProperty(key)) {
            if (key.toLowerCase() === "css") {
                continue;
            }
            div[key] = options[key];
        }
    }

    var css = options.css;
    if (css) {
        body.appendChild(div);
        var handle = -1;
        handle = window.setInterval(function () {
            var match = true;
            for (var key in css) {
                if (css.hasOwnProperty(key)) {
                    match = match && utils.getStyle(div, key) === css[key];
                }
            }

            if (match === true) {
                window.clearTimeout(handle);
                body.removeChild(div);
                callback();
            }
        }, 100);
    }
}

И вот как я использовал вышеописанную функцию:

onCssLoad({
    "id": "ensure-cssload-8473649",
    css: {
        display: "none"
    }
}, function () {
    // code when you want to execute 
    // after your CSS file is loaded
});

Здесь 1-й параметр принимает options, где id - это проверка на соответствие тесту стиля и свойство css для проверки того, что загружено из CSS.

Answer 3

Я предполагаю, что вы делаете это, потому что вам нужно динамически создать URL таблицы стилей.

Приходят на ум варианты пары:

1) Создайте URL на стороне сервера и избегайте этогопроблема в целом.

2) Используйте setTimeout, чтобы проверить, был ли загружен стиль, и проверяйте каждые 20 мс или около того, пока getComputedStyle не возвращает желаемое значение.

Я неТ # 2 вообще нравится ... но это вариант.Если вы используете # 2, обязательно очистите тайм-аут, даже если есть исключение.

Answer 4

Вот решение, которое работает во всех браузерах.

function loadCss(fileUrl) {
  // check for css file type
  if (fileUrl.indexOf(".css")==fileUrl.length-4) {
    // Create link element
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", fileUrl);
    if (typeof fileref!="undefined") {
      // remove the . if this is a relative link
      if(fileUrl.indexOf('.')==0) {
        fileUrl = fileUrl.substr(1);
  }
  // generate the full URL to use as the fileId
      var pathname = window.location.pathname;
  var pathUrl = pathname.substr(0,pathname.lastIndexOf("/"));
  var fileId = window.location.protocol + "//" + window.location.host + pathUrl + fileUrl;
      // append the newly created link tag to the head of the document
      document.getElementsByTagName("head")[0].appendChild(fileref);

  // begin checking for completion (100ms intervals up to 2000ms)
  this.checkCSSLoaded(fileId,100,0,2000);

    } else throw 'INVALID_CSS_ERROR';
  } else throw 'INVALID_CSS_ERROR';
}

function checkCSSLoaded(cssHref,milliPerCheck,milliPerCount,milliTimeout) {
  // Look through all sheets and try to find the cssHref
  var atSheet = -1;
  var sheetLength = document.styleSheets.length;
  while(++atSheet < sheetLength ) {
if(cssHref == document.styleSheets[atSheet].href) {
      // If found dispatch and event or call a procedure
      /* Do whatever is next in your code here */
  return;
}
  }
  // check for timeout
  if(milliCount > milliTimeout) { 
    alert('INVALID_CSS_ERROR::'+" ("+cssHref+"+ not found!");
    /* Do whatever happens if timeout is reached here */
return;
  }
  // else keep trying
  setTimeout(checkCSSLoaded ,milliPerCheck, cssHref, milliPerCheck, milliCount+millPerCheck, milliTimeout);
}

По сути, мы

1. Создаем тег ссылки.
2. Установите его атрибуты, чтобы он знал свой тег ссылки на таблицу стилей
3. Создайте идентификатор файла таким образом, чтобы он всегда был полным URL-адресом файла
4. Добавьте тег ссылкик заголовку заголовка документа
5. Выполните последовательные тесты, чтобы увидеть, если (stylesheet.href == fileID) появится
   • Если найдено, сделать что-то еще, если тайм-аут сделать что-то еще, продолжайте проверять

Answer 5

Использование document.styleSheets для проверки неправильности загрузки css, поскольку, как только ссылка на css добавляется в DOM, она будет доступна из document.styleSheets, даже если она еще не загружена.

Добавление маркера в CSS тоже хак.

Правильное решение - прослушать событие onload:

   var loadedCss = {};
   cssHref = "http://www.foo.com/bar.css";
   css = document.createElement("link");
   css.setAttribute("rel", "stylesheet");
   css.setAttribute("type", "text/css");
   css.setAttribute("href", cssHref);
   css.onload = function(){
      loadedCss[cssHref] = true;
   }
   document.getElementsByTagName("head")[0].appendChild(css);


   function isCssLoaded(url) {
       return loadCss[url];
   }