Проблема программного добавления CSS в IE

У меня есть букмарклет, который вставляет таблицу стилей CSS в целевой DOM через тег "link" (внешняя таблица стилей).

Недавно это перестало работать на Amazon.com, только в Internet Explorer. Он работает на других сайтах и ​​с другими браузерами (даже на Amazon.com). Техника, которую мы используем для вставки таблицы стилей, довольно проста:

document.getElementsByTagName('head')[0].appendChild(s);

Где "s" - объект ссылки, созданный с document.createElement, Даже в Amazon я вижу через инспектора DOM панели инструментов разработчика Internet Explorer, что этот элемент есть. Однако, если я предупреждаю document.styleSheets Коллекция в JavaScript, его там нет.

В качестве теста я пытался использовать метод document.createStyleSheet только для IE, передавая URL-адрес моей таблицы стилей в качестве аргумента. Это выдает ошибку:

Недостаточно памяти для завершения этой операции

Точки интереса:

  • Документация для document.createStyleSheet говорит, что будет выдано сообщение об ошибке, если на странице более 31 таблицы стилей, но (1) это другая ошибка и (2) на странице всего 10 внешних таблиц стилей.
  • Мой поиск в Google привел к появлению ряда тупиков, и единственной, которая предлагала что-либо связанное со таблицей стилей, был этот пост drupal, но он относится к ограничению символов для встроенных стилей, а не к проблеме, связанной с внешними стилями.
  • Тот же код, даже createStyleSheet звоните, работает на других сайтах в IE.

Это достигло "полной тайны" для меня.

Источник

4 ответа

Решение

Я только что попробовал это

javascript:(function(d) { d.createStyleSheet().cssText="* {color:blue !important;}"   })(document);

а также

javascript:(function(d) { d.createStyleSheet("http://myschemas.com/pub/clear.css") })(document);

из IE на amazon.com и оба работали. Может быть, вам нужно добавить! Важные для некоторых элементов вашего CSS, чтобы убедиться, что они вступают в силу сейчас?

ОБНОВЛЕНИЕ: нашел возможное решение для вас...

javascript:(function(c) {c[c.length-1].addImport("http://myschemas.com/pub/clear.css")})(document.styleSheets);

Надеюсь, это поможет вам.

Источник

В поисках ответа я обнаружил, что ограничение в 31 таблицу стилей повышает это исключение при программной загрузке CSS:

http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/not-enough-storage-is-available-to-complete-this-operation.aspx

Первоначальное ограничение описано в документе базы знаний (предполагается, что это происходит только в IE8 и ниже, но неоднократно сообщалось, что оно происходит в IE9):

http://support.microsoft.com/kb/262161

Источник

Я делал что-то подобное, используя jQuery, и обнаружил, что мне нужно сделать это в следующем порядке:

var $link = $('<link>');
$('head').add($link);
$link.attr({
  type: 'text/css',
  // ... etc ...
  media: 'screen'
});

В противном случае это не работает в IE (IE7, еще не смотрел IE8).

НТН

Источник

Это все, что я делаю, и я никогда не видел, чтобы это не работало.

loadCss = function( name, url ) {

    var head = document.getElementsByTagName('head')[0];

    var link = document.createElement("link");

    link.setAttribute("type", "text/css");

    link.setAttribute("rel", "stylesheet");

    link.setAttribute("href", url);

    link.setAttribute("media", "screen");

    head.appendChild(link);
};
Источник
Другие вопросы по тегам