WIE man überprüft, ob eine externe (domänenübergreifende) CSS-Datei mit Javascript geladen wird

7

Ich habe eine Funktion mit javascript :

  1. Erzeuge ein Link-Element und setze href = cssFile.
  2. Fügen Sie das Verknüpfungselement in head tag ein.
  3. Erstellen Sie ein div-Element.
  4. Legen Sie den Klassennamen mit setAttribute
    5. fest
  5. appendChild div am Körper.
  6. Nun wird der CSS-Regelwert mit document.defaultView.getComputedStyle(divElement, null)[cssRule] .
    7. abgerufen

Jetzt gibt getComputedStyle die Standardwerte zurück, und wenn ich auf Haltepunkt mit Firebug vor getComputedStyle aufrufe warte, gibt es die CSS-Regel aus dem injizierten CSS zurück.

Grüße, Munim

    
Abdul Munim 25.09.2010, 14:08
quelle

5 Antworten

8

Genau das habe ich getan.

Um sicherzustellen, dass eine bestimmte CSS-Datei geladen wird, habe ich am Ende der CSS-Datei einen Stil hinzugefügt. Zum Beispiel:

%Vor%

Jetzt habe ich eine JavaScript-Funktion, die den Callback auslöst, der angegeben wird, wenn der obige Style auf der Seite geladen wird:

%Vor%

Und so habe ich die obige Funktion benutzt:

%Vor%

Hier nimmt der 1. Parameter die options , wo id auf die Testart und die CSS-Eigenschaft überprüft wird, um zu überprüfen, was vom CSS geladen wurde.

    
Abdul Munim 14.11.2011, 13:02
quelle
9

Sie können die dynamische CSS-URL erstellen und die CSS als einfachen Text mit einem normalen AJAX-Aufruf abrufen.

Dann benutze das um die CSS zu laden:

%Vor%

Und benutze es so:

%Vor%     
letronje 25.09.2010 14:46
quelle
4

Ich nehme an, dass Sie dies tun, weil Sie die URL des Stylesheets dynamisch erstellen müssen.

Paaroptionen kommen mir in den Sinn:

1) Erstellen Sie die URL serverseitig und vermeiden Sie dieses Problem vollständig.

2) Überprüfen Sie mit einem setTimeout, ob der Style geladen wurde und prüfen Sie alle 20 ms, bis getComputedStyle den gewünschten Wert zurückgibt.

Ich mag # 2 überhaupt nicht ... aber es ist eine Option. Wenn Sie # 2 verwenden, müssen Sie das Zeitlimit löschen, auch wenn eine Ausnahme vorliegt.

    
Tim Medora 25.09.2010 14:31
quelle
2

Hier ist eine Lösung, die in allen Browsern funktioniert.

%Vor%

Im Grunde genommen

  1. Erstellen Sie ein Link-Tag.
  2. Legen Sie seine Attribute fest, damit sie ein Stylesheet-Link-Tag kennen
  3. Erstellen Sie eine Datei-ID so, dass sie immer die vollständige URL der Datei
    4. ist
  4. Fügen Sie das Link-Tag am Kopf des Dokumentenkopfs an
  5. Führe aufeinanderfolgende Tests durch, um zu sehen, ob (stylesheet.href == fileID) existiert
    • Wenn gefunden, etwas anderes tun, wenn Timeout etwas anderes tut, dann überprüfe
dRoneBrain 13.11.2012 16:56
quelle
0

Die Verwendung von document.styleSheets zur Überprüfung, ob ein css geladen ist, ist falsch, da sobald ein CSS-Link zum DOM hinzugefügt wird, er in document.styleSheets verfügbar ist, auch wenn er noch nicht geladen ist. p>

Hinzufügen einer Markierung zu CSS ist auch hacky.

Die richtige Lösung ist das Onload-Ereignis zu hören:

%Vor%     
cl yu 09.11.2013 22:25
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie lade ich Ordner mit PHP hoch?