Question

I keep having this doubt in my mind, I want to test if an URL exists before loading the script from that URL, but the way I’m trying to do it fails, as I’m using XMLHTTPRequests and as many know, when you use this method to GET a file from a server that it’s not the same as the script that executes the GET, you will get back is not allowed by Access-Control-Allow-Origin .

So how come Modernizr.load() method can theoretically load the scripts and I cannot even see if there’s actually something there ?

Answer 1

Because Modernizr.load(), like @dm03514 mentions, loads the script not through XMLHttpRequest, but by inserting a <script tag which doesn’t have the cross-domain restriction. It then tries to check if the script loaded correctly, but that’s not an easy task and it may not be possible in all browsers. For more detail you can see this recopilation of the support of different browsers for the various options available for checking success of loading scripts/css: http://pieisgood.org/test/script-link-events/

As for why XMLHttpRequest fails, you can read more about cross-domain restrictions at MDN: https://developer.mozilla.org/en-US/docs/HTTP_access_control

Some motivations for using script loaders are:

1. Loading scripts based on conditions like what yepnope and YUI do
2. Load scripts asynchronously for performance reasons ( tags block the rendering of the page).
3. Dependency injection (load resources that other scripts need, this is what requirejs does)
4. Load scripts when certain events happen (load hew functionality when a user clicks on a tab)

Also when you use script loaders, you usually load everything from them, including your application code, so that your application code has access to all dependencies. The require.js model (google AMD modules) is a great way of organizing your app. It allows you to write small modules that do specific tasks and reuse them, instead of one big file that does everything.