Das dynamische Laden von CSS-Stylesheets funktioniert im IE nicht

73

Ich lade dynamisch ein CSS-Stylesheet (mit ein wenig Hilfe von jQuery) wie folgt:

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

Dies funktioniert gut in Firefox und Google Chrome, aber nicht in IE.

Irgendeine Hilfe? Vielen Dank

— Pistacchio
quelle

Duplikat von stackoverflow.com/questions/524696/…

— Typ

119

Sobald der IE alle mit der Seite geladenen Stile verarbeitet hat, können Sie nur mit ein weiteres Stylesheet zuverlässig hinzufügen document.createStyleSheet(url)

Weitere Informationen finden Sie im MSDN-Artikel zu createStyleSheet.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

— Rex M.
quelle

1

Dokumentation für document.createStyleSheet: ssicom.org/js/x276572.htm (der MSDN-Artikel schlägt mit einem 503-Fehler fehl ...). Beachten Sie, dass das zurückgegebene Objekt ein DispHtmlStyleSheet-Objekt und kein LINK-Element ist. Um das Link-Tag von diesem Objekt zu erhalten, müssen Sie auf document.createStyleSheet ('...') zugreifen. OwningElement

— Chris Moschini

Ich glaube, dass das dynamische Erstellen eines neuen Style-Tags <style>your style here</style>und das Hinzufügen zu <head> auch im IE funktioniert.

— Pacerier

3

Update 09/2013: Die Methode createStyleSheet wird nicht mehr unterstützt. Weitere Informationen finden Sie unter: msdn.microsoft.com/en-us/library/ie/ms531194%28v=vs.85%29.aspx

— pablofiumara

Meine Lösung unten ist nicht einverstanden,

— ekerner

Ich habe die folgende Lösung von @ ekerner ausprobiert, aber dies ist die einzige Lösung, die in IE9 (emulierter Modus) funktioniert hat.

— Kontaktmatt

40

Sie müssen den href attr zuletzt und erst einstellen, nachdem das Linkelement an den Kopf angehängt wurde:

$('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');

Aktualisieren

Heutzutage besteht der einzige Zweck von IE und Edge darin, Chrome herunterzuladen. Ich empfehle daher, Ihren Code NICHT mit benutzerdefinierter Unterstützung für IE oder Edge aufzublähen und stattdessen deren Existenz zu ignorieren.

— ekerner
quelle

9

Dies ist eine wichtige Besonderheit des Internet Explorers (noch vor IE 8) und für ein Projekt, an dem ich gearbeitet habe, absolut kritisch. Vielen Dank, dass Sie es hier notiert haben. Wann werden die Leute den IE nicht mehr benutzen?

— Jay Dansand

2

Ich mag dies besser als die Nur-IE-Methode 'document.createStyleSheet'.

— Graham

1

Dies funktionierte für mich auf einem IE9 im IE8-Kompatibilitätsmodus, schlug jedoch auf einem reinen / echten IE8 fehl. Auf einem echten IE8 war nur die Methode 'document.createStyleSheet' für mich zuverlässig. Nur um andere wissen zu lassen, die das gleiche Problem haben.

— Kosi2801

1

Damit dies auf meiner aktuellen IE8 Win7 VM von modern.ie funktioniert, musste ich die Attributnamen in Anführungszeichen setzen: 'type' und 'rel' ...

— Pierre Henry

1

Testete dies in IE9 und es löste ein Stylesheet-Injektionsproblem, das ich hatte! Schätze es wirklich!

— Marc Fowler

3

Dies scheint auch im IE zu funktionieren:

var link = document.createElement ('link');
link.rel = 'Stylesheet';
link.type = 'text / css';
link.href = '/includes/style.css';
document.getElementsByTagName ('head') [0] .appendChild (link);

— Cmanley
quelle

2

Dies könnte auch etwas damit zu tun haben - Aus dem Microsoft Support-Artikel :

Stile auf einer Webseite fehlen oder sehen falsch aus, wenn die Seite in den Versionen von Microsoft Internet Explorer geladen wird ...

... Dieses Problem tritt auf, weil die folgenden Bedingungen in Internet Explorer erfüllt sind:

Alle Stil-Tags nach den ersten 31 Stil-Tags werden nicht angewendet.

Alle Stilregeln nach den ersten 4.095 Regeln werden nicht angewendet.

Auf Seiten, die die @ import-Regel verwenden, um kontinuierlich externe Stylesheets zu importieren, die andere Stylesheets importieren, werden Stylesheets mit einer Tiefe von mehr als drei Ebenen ignoriert.

— urig
quelle

1

Es scheint, dass

$('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head');

funktioniert auch im IE, solange die URL eine vollqualifizierte URI einschließlich des Protokolls ist ...

— campino2k
quelle

0

Öffnen Sie ie8, ohne dass der Debugger geöffnet ist. Wenn Sie nach dem Punkt des dynamischen Stylesheets ... Debugger und Voila öffnen, sollten sie dort sein.

— Oliver Foster
quelle