The external CSS has clearly been loaded, but when you try to access the content of the external stylesheet you will stumble upon the browser SOP (same origin policy) which will consider the operation insecure.
Nevertheless, as soon as you create an element with for example class="style3" the external style will be applied correctly.
I need to be able to read the contents of the CSS file in JS like in the example. Obviously I can use the styles, but that's not what this is about.
Is there no way to do this?
As devnull69 has said, you are blocked by the Same Origin Policy.
JavaScript automatically prevents scripts on one server from accessing properties of documents on a different server. This restriction prevents scripts from, for example, fetching private information such as directory structures or user session history
Simply stated, the SOP states that JavaScript code running on a web page may not interact with any resource not originating from the same web site.
Don't ask for a work-around - there isn't one.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
I'm asking why CORS can't be used in this situation, because it could if I was making an XMLHttpRequest to submit data.
Why do you think I just want someone to post a load of code? Nobody learns that way. Surely you don't just hover around these forums posting code all day. Sometimes explaining things is better, quicker and more helpful.
I'm asking why CORS can't be used in this situation, because it could if I was making an XMLHttpRequest to submit data.
Why do you think I just want someone to post a load of code? Nobody learns that way. Surely you don't just hover around these forums posting code all day. Sometimes explaining things is better, quicker and more helpful.
I can't tell you that because I don't know anything about CORS. Ask rndme.
As I understand it the CORS standard works by adding new HTTP headers that allow servers to serve resources to permitted origin domains.
But Javascript still cannot access those resources due to the SOP.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
document.body.className="style3"; //text turns green
getComputedStyle(document.body).color; //shows "rgb(0, 128, 0)", which is "green"
so, one-at-a-time, you can sniff style properties. Note that you cannot hit pseudo-elements (:before/:after), and content: hello world; won't work either, so don't bother with that.
you can also send arbitrary text as the #hash of a background-image URL, or if you have clean CSV data, a font-family stack. you can "rip" both of those using getComputedStyle(). i've actually used to deliver tweets to an HTTPS client from HTTP without the dreaded popups about mixed zones, since the browser doesn't worry about css safety. a little janky, but it works.
__________________ my site (updated 5/13) STATS (2013/5) HTML5:90.2% MOB:15.2% IE7:0.5% IE8:8.4% IE9:8.5% IE10:8.5%
I can't tell you that because I don't know anything about CORS. Ask rndme.
As I understand it the CORS standard works by adding new HTTP headers that allow servers to serve resources to permitted origin domains.
But Javascript still cannot access those resources due to the SOP.
it's pretty straight-forward.
run this in firebug or devtool right now from here:
Code:
// normal 'ajax' function circa 2007:
function aGet(turl, callback) {
var XHRt = new XMLHttpRequest();
XHRt.onreadystatechange = function () {
if (XHRt.readyState == 4 && XHRt.status == 200) {
callback(XHRt.responseText, XHRt);
}
};
XHRt.open("GET", turl, true);
XHRt.send("");
return XHRt;
} //end aGet()
// example async call to 3rd party domain:
aGet(
"http://cdn.atlas.illinois.edu/css/?file=http://www.it.illinois.edu/styles/screen.css" ,
function(data){
alert( data.toUpperCase() );
}
);
it just works, no big whoop. you should see uppercase CSS when it's run.
__________________ my site (updated 5/13) STATS (2013/5) HTML5:90.2% MOB:15.2% IE7:0.5% IE8:8.4% IE9:8.5% IE10:8.5%
The only way to access a different domain via Ajax is to call a script ron the server running on the same domain and have that script access the other domain for you.
The only way to pass information between JavaScript running on different domains is to set up message listeners in both scripts and use postMessage to send the messages across. Note that this requires either that you have access to update the scripts on both domains or the owner of the other domain has set up their side of the processing.
The only way to access a different domain via Ajax is to call a script ron the server running on the same domain and have that script access the other domain for you.
that's just not true.
did the code in post #10 not work for you?
granted, it's not the ie8 compatible syntax, but i sure hope that's not the browser you are using!
__________________ my site (updated 5/13) STATS (2013/5) HTML5:90.2% MOB:15.2% IE7:0.5% IE8:8.4% IE9:8.5% IE10:8.5%
It is when the site you are trying to access doesn't allow ajax calls from other domains.
It is the site you are trying to access that has to have CORS implemented in order for cross domain ajax calls to work. Implementing it on your own site allows scripts on other sites access to your server but does not allow your scripts access to other servers.
Thanks everyone for replying. I've been away for a bit and there's lots to look at. I think I understand everything that can and can't be done and why this is.
Before you post, read our: 
