Fehler beim programmatischen Hinzufügen von CSS zu IE

Question

Ich habe ein Bookmarklet, das ein CSS Stylesheet über ein "link" -Tag (externes Stylesheet) in das Ziel-DOM einfügt.

In letzter Zeit funktioniert das nicht mehr auf Amazon.com, nur im Internet Explorer. Es funktioniert auf anderen Seiten und mit anderen Browsern (sogar auf Amazon.com). Die Technik, die wir verwenden das Stylesheet einzufügen ist ziemlich einfach:

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

Wo „s“ ist ein Link-Objekt mit document.createElement erstellt. Auch bei Amazon sehe ich über den DOM-Inspektor der Internet Explorer Developer Toolbar, dass das Element dort ist. Allerdings Wenn ich die document.styleSheets Sammlung in JavaScript warnt, ist es nicht da.

Als Test habe ich versucht, die IE-only document.createStyleSheet Methode zu verwenden, die die URL zu meinem Stylesheet als ein Argument übergibt. Dies führt den Fehler:

Not enough storage is available to complete this operation

Points of Interest:

• Die Dokumentation für document.createStyleSheet sagt, wird ein Fehler ausgelöst werden, wenn mehr als 31 Sheets auf der Seite sind, aber (1) es ist ein anderer Fehler und (2) es gibt nur 10 externe Stylesheets auf der Seite.
• Mein googling für den Fehler ergab eine Reihe von Sackgassen, und die einzige, die nichts Stylesheet-bezogen vorgeschlagen war this drupal post, aber es bezieht sich auf eine Zeichenbeschränkung auf Inline-Stile, im Gegensatz zu einem Problem in Bezug auf externe Stile .
• Der gleiche Code, auch der createStyleSheet Aufruf, funktioniert auf anderen Websites in IE.

Jeder Rat würde geschätzt werden. Dies hat für mich den Status "komplett mysteriös" erreicht.

Answer 1

Ich habe gerade versucht, diese

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

und

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

von IE auf amazon.com und beide arbeiteten. Vielleicht müssen Sie einige Elemente Ihres CSS hinzufügen, um sicherzugehen, dass sie jetzt wirksam werden?

UPDATE: eine mögliche Lösung für Sie gefunden ...

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

Hoffe, dass es Ihnen hilft.

Answer 2

Das ist alles, was ich tue, und es habe ich noch nie gesehen es funktioniert nicht.

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

Answer 3

Ich war etwas ähnliches mit jQuery tun und fand, dass ich es in dieser Reihenfolge zu tun hatte:

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

Sonst funktioniert es nicht in IE arbeiten (IE7, nicht auf IE8 sah noch).

HTH

Answer 4

Suche nach einer Antwort, habe ich festgestellt, dass die 31 Sheets diese Ausnahme auslösen begrenzen, wenn programmatisch CSS geladen:

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

Die ursprüngliche Einschränkung wird in einem Knowledge Base-Dokument beschrieben (suppossed nur auf IE8 und darunter geschehen, aber wiederholt berichtet, wie in IE9 passiert):

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