Load CSS file dynamically using JavaScript

Question

I am working on a site, where i need to check if a CSS file on a remote host exists or not and then load the local copy of the same CSS file, if it doesn't exists.

Code on which I am working,

<script>
function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}
function AddLocalCss(){ document.write('<link rel="stylesheet" type="text/css"  href="css/html5-reset.min.css">') }
</script>
<script>!UrlExists('http://meyerweb.com/eric/tools/css/reset/reset.css') && AddLocalCss();</script>

But this throws an error, (when checked in Chrome Developer tools)

XMLHttpRequest cannot load http://meyerweb.com/eric/tools/css/reset/reset.css. Origin http://example.com is not allowed by Access-Control-Allow-Origin.
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101

Can anyone please suggest a solution or a workaround to achieve this?

you are not allowed to copy css from the website's servers.. — Rajat Singhal
– Rajat Singhal, Commented Aug 15, 2012 at 15:23
This seems to be an XSS preveting technique. The header Access-Control-Allow-Origin should contain a reference to your domain OR * for everywhere. — Rolice
– Rolice, Commented Aug 15, 2012 at 15:24
Possible duplicate: stackoverflow.com/questions/3794128/…. Basically, you're running into a cross-domain access control policy issue. — Timothy S. Van Haren
– Timothy S. Van Haren, Commented Aug 15, 2012 at 15:24
You can use this script: asimishaq.com/dynamically-loading-css-and-js-files — asim-ishaq
– asim-ishaq, Commented Mar 12, 2014 at 13:01

Community · Accepted Answer · 2017-05-23 11:48:48Z

0

you can use some of the functionality of this post: Dynamically loading css file using javascript with callback without jQuery, you can use straight that function.

I hope this would help

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Aug 15, 2012 at 15:28

Ankur Ghelani

6594 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleg V. Volkov · Accepted Answer · 2012-08-15 15:28:51Z

0

XHR is limited by Same Origin Policy - you can't request resources from another domain/protocol without jumping extra hoops. You must either request remote server to set up CORS or don't use XHR at all.

Instead of it you can just generate a link element and watch either its state or state of other elements that loaded style would affect. Unfortunately this behavior is not standartized across browsers, but, fortunately, there are some libraries to simplify dealing with it. Check out Ensure.

answered Aug 15, 2012 at 15:28

Oleg V. Volkov

22.6k4 gold badges49 silver badges68 bronze badges

Collectives™ on Stack Overflow

Load CSS file dynamically using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related