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

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

4 голосов
/ 25 марта 2009

У меня есть букмарклет, который вставляет таблицу стилей 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, ее там нет.

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

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

Достопримечательности:

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

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

Ответы [ 4 ]

4 голосов
/ 25 марта 2009

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

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, чтобы убедиться, что они вступают в силу сейчас?

UPDATE: Нашел возможное решение для вас ... 

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

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

2 голосов
/ 26 ноября 2012

В поисках ответа я обнаружил, что ограничение в 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

0 голосов
/ 29 ноября 2010

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

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

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

НТН

0 голосов
/ 25 марта 2009

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

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);
};
...