13

Here is the code:

You'll notice the alert(document.styleSheets[x].cssRules.length) fails with a "security exception". Any workaround for this. I am asking because there are a couple of "CSS lazy loading" classes out there that use this feature to detect if the CSS document is loaded.

Also: is the security exception a correct behavior/does it conform to standards?

4
  • I am getting Error: uncaught exception: [Exception... "A parameter or an operation is not supported by the underlying object" code: "15" nsresult: "0x8053000f (NS_ERROR_DOM_INVALID_ACCESS_ERR)" location: "fiddle.jshell.net/salman/2hyYg/show Line: 49"] in the first example
    – mplungjan
    Mar 16, 2011 at 10:08
  • NS_ERROR_DOM_INVALID_ACCESS_ERR is the error.
    – Salman A
    Mar 16, 2011 at 10:10
  • and Error: width is null Source File: jsfiddle.net/js/LayoutCM.js Line: 189 in the second
    – mplungjan
    Mar 16, 2011 at 10:10
  • Sorry about the confusion... I've revised the fiddle slightly.
    – Salman A
    Mar 16, 2011 at 10:27

7 Answers 7

7

You can get that error when trying to read a stylesheet loaded from a different domain or server, or trying to read an @import rule.

For your purpose, just check the document.styleSheets.length .

2
  • For your purpose, just check the stylesheets.length, it won't increment until the stylesheet with all of it's rules has rendered in the browser. << is this a tried and tested workaround?
    – Salman A
    Mar 16, 2011 at 10:22
  • Guess not... chrome does not increment document.styleSheets.length until the stylesheet is loaded, but FireFox does. Did not check other browsers.
    – Salman A
    Mar 16, 2011 at 13:03
6

As of 2013, you can set the "crossorigin" attribute on the <link>-Element to signal the browser that this CSS is trusted (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link).

After that, you can access its rules via Javascript.

1
  • doesn't work in Firefox
    – capr
    Feb 19 at 20:33
1

You are loading css-files from another domain, I guess that you are not allowed to modify cssRules for externally loaded css files.

see this: Accessing cross-domain style sheet with .cssRules

0
1

The stylesheet is there and works fine, you just cannot access the cssRules property of the stylesheet because it is set to null by the browser.

The security error you get is due to the same origin policy - you are working on stylesheets from another domain, you will not have this problem if the stylesheets are hosted on the same domain your webpage is.

1

Try with condition: (IE workaround)

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

This is giving the error:

aftermath(document.styleSheets.length - 1);

If i set it to 0 all work fine... The problem is that the css is not ready at this time, if you need to access it, you need to do that in a second moment

Last edit:

If you whant keep css updated from source, you can use a php proxy for loading it:

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

Then you can get it using e.g. /proxy.php?version=1.7.0&theme=humanity

4
  • I've revised the fiddle and added a delay. But I cannot get past the security issue no matter what I do.
    – Salman A
    Mar 16, 2011 at 10:31
  • As i say, after you set window.setTimeout(aftermath, 2000); all work fine... Except for the security error Mar 16, 2011 at 10:37
  • Proxy is a valid option; not in my case though.
    – Salman A
    Mar 16, 2011 at 13:00
  • Ah, the advantages of a CDN, without any of the advantages of a CDN ;)
    – alex
    May 9, 2013 at 2:20
0

You can put the failing line in a try-catch block. That's how i solved the same issue on one project.

-2

Try window.document.styleSheets[x].cssRules.length instead of document.styleSheets[x].cssRules.length. It will work on firefox without any security exception.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.