Accessing CSS classes in a css file, cross-domain, in javascript

3
votes

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

3
javascriptcssfirefox
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
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

3 Answers

3
votes

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?

0
votes

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.

0
votes

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.