3

We include the CSS file via standard HTML STYLE tag.

Then we need the javascript code to access the CSS classes and attributes. in IE and Chrome all goes fine, but in Firefox it throws this exception:

uncaught exception: Security error (NS ERROR DOM SECURITY ERR)

here's the javascript code:

for (var i = 0; i != window.document.styleSheets.length; i++) {
    rules = window.document.styleSheets.item(i);
    if(rules.href.indexOf('someurl.com')){
        break;
    }
}
return rules.cssRules || rules.rules;

it works fine in IE, Chrome and Safari, but it doens't in Firefox and Opera.

any ideas? thanks in advance

Trident Splash
  • 649
  • 2
  • 10
  • 25
  • 2
    It seems to work in FireFox 3.5. Can you post all of the code that you are using? It seems that the snippet you provided is inside of a fucntion. Could you provide where that function is being called? – Tres Aug 14 '09 at 02:04
  • Can't fix your javascript, but any chance you could write a processing class (PHP, Java, whatever) that you call out to with ajax to write the css files locally? Would take care of the security restrictions of the browser. – Pat Aug 14 '09 at 02:55

3 Answers3

3

JavaScript can be referenced from any domain, but can only enact changes to the exact domain of the document that is executing it. By exact domain I mean everything from the protocol to just before the first directory must be identical.

You are not supposed to be able to use JavaScript to access a different domain. I am not sure why this is working in IE or Chrome, but it should not be. If the CSS is from domain different than the page executing the JavaScript you will be thrown a security error.

The real question here is: what property is item? I do not see that defined in your code and I have not seen that used before. Why are you trying to change the stylesheet with JavaScript instead of simply applying style changes directly to the DOM where security issues are not raised?

  • also note that even when using the link tag to add a local CSS, you will only be able to access it's stylesheets when it's loaded with http ... local file// access will not work (at least on chrome) – kofifus Oct 12 '15 at 04:48
0

You can change styles with javascript with this:

elm.style.display = "none";

but those are write only, see quirksmode getStyles for reading styles.

It may depend on when and how you place your styles, using @import vs or placing your styles after your javascript, etc. certain race conditions can arise, so maybe try to get the styles after window.onload.

Tom
  • 6,947
  • 7
  • 46
  • 76
  • References to element.style.XXX are to the equivalent in HTML of < ... style="..." > on individual elements, which according to cascading style rules take precedence over everything else for that individual element. They are not references to the style "rules" specified in a stylesheet (document.styleSheets[N]) and will not change multiple elements all at once. – Chuck Kollars May 26 '12 at 23:10
0

I'd say you are trying to change the style before it has loaded at all in FF. You could try moving the Javascript invocation to just before the closing tag, and also creating that method on the window.onLoad event or it's equivalent if you are using a JS Library.

Alessandra Pereyra
  • 2,640
  • 18
  • 22