Frage

Hier ist der Code:

Sie werden das bemerken alert(document.styleSheets[x].cssRules.length) scheitert mit einer "Sicherheitsausnahme". Jede Problemumgehung dafür. Ich frage, weil es ein paar "CSS Lazy Loading" -Kurse gibt, die diese Funktion verwenden, um festzustellen, ob das CSS -Dokument geladen ist.

Außerdem: Ist die Sicherheitsausnahme ein korrektes Verhalten/entspricht sie den Standards?

War es hilfreich?

Lösung

Sie können diesen Fehler erhalten, wenn Sie versuchen, ein Stylesheet zu lesen, das von einer anderen Domäne oder einem anderen Server geladen wurde oder um eine @Import -Regel zu lesen.

Überprüfen Sie zu Ihrem Zweck einfach das Dokument. Stylesheets.length.

Andere Tipps

Ab 2013 können Sie das "Crossorigin" -attribut auf das festlegenu003Clink> -Element, um dem Browser zu signalisieren, dass dieses CSS vertrauenswürdig ist (https://developer.mozilla.org/en-us/docs/web/html/element/link).

Danach können Sie über JavaScript auf seine Regeln zugreifen.

Sie laden CSS-Files aus einer anderen Domäne, ich denke, Sie dürfen CSSRULES nicht für extern geladene CSS-Dateien ändern.

Sieh dir das an: Zugriff auf Cross-Domänen-Stilblatt mit .cssrules

Das Stylesheet ist da und funktioniert gut, Sie können einfach nicht auf die zugreifen cssRules Eigenschaft des Stylesheet, weil es vom Browser auf Null gesetzt wird.

Der Sicherheitsfehler, den Sie erhalten, beruht auf derselben Herkunftsrichtlinie - Sie arbeiten an Stylesheets aus einer anderen Domain. Sie haben dieses Problem nicht, wenn die Stylesheets auf derselben Domain gehostet werden, die Ihre Webseite ist.

Versuchen Sie es mit Bedingung: (dh Problemumgehung)

function aftermath(index) {
    var css = document.styleSheets[index].rules || document.styleSheets[index].cssRules;
    alert(css.length);
}

Dies gibt den Fehler:

aftermath(document.styleSheets.length - 1);

Wenn ich es auf 0 setze, funktionieren alle gut ... Das Problem ist, dass das CSS zu diesem Zeitpunkt nicht fertig ist. Wenn Sie darauf zugreifen müssen, müssen Sie dies in einem zweiten Moment tun

Letzte Bearbeitung:

Wenn Sie CSS von der Quelle aktualisiert haben, können Sie einen PHP -Proxy zum Laden verwenden:

<?php
$name = 'http://ajax.googleapis.com/ajax/libs/jqueryui/$_GET[version]/themes/$_GET[theme]/jquery-ui.css';
$fp = fopen($name, 'rb');
fpassthru($fp);
exit;
?>

Dann können Sie es mit EG bekommen /proxy.php?version=1.7.0&theme=humanity

Sie können die fehlerhafte Linie in einen Try-Catch-Block einfügen. So habe ich das gleiche Problem bei einem Projekt gelöst.

Versuchen window.document.styleSheets[x].cssRules.length Anstatt von document.styleSheets[x].cssRules.length. Es wird ohne Sicherheitsausnahme auf Firefox funktionieren.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top