Dynamically and synchronously load JavaScript file from a different domain

Question

I would like to synchronously include a JavaScript file from a different domain via code. This means that using a synchronous XMLHttpRequest will not work. I also want to avoid document.write because my code will be executed when the document is fully loaded. Is this even possible? Does any of the existing JavaScript libraries support that feature?

Basically I want this to work:

<script type="text/javascript">
  $(document).ready(function() {
      load("path_to_jQuery_UI_from_another_domain");
      console.log(jQuery.ui.version); //outputs the version of jQuery UI
  });
</script>

EDIT: My idea is to create a jQuery plugin which loads its JavaScript files based on the enabled features. jQuery plugins can be initialized at any time which means no document.write. It is perfectly fine to load the JavaScript files asynchronously but people expect their plugins to be fully initialized after calling $("selector").something();. Hence the need of synchronous JavaScript loading without document.write. I guess I just want too much.

Revoke

"people expect their plugins to be fully initialized". No. People should learn how to use asynchronous code. Have you looked at require.js? It solves all this for you. – Holomorphic

Answer 1

It's not possible to synchronously execute a script at a URL. Note further that synchronous anything, when networks (or even file systems!) are involved is a Bad Idea. Someone, sometime, somewhere will be on a slow system, or a slow network, or both, and suddenly you've just hung their UI in the process.

Synchronous is bad. Asynchronous with callbacks is good.

Note that, as a worst-case hack, you could overwrite $ with your own function, which returned an object with just the right properties, and you could semi-lazily evaluate all actual calls. This of course breaks if you start relying on immediate execution of the calls, or on their execution being intermingled with the evaluation of arguments, but in the worst case it's not completely implausible.

Betweenwhiles

Answer 2

The only way to synchonously load files is to document.write a script tag into your page. This is generally considered a bad practice. There is probably a better way to do what you actually want, but, in the spirit of transparency:

document.write('<script src="http://otherdomain.com/script.js"></'+'script>')

should do the trick. You have to escape the closing script tag so the parser doesn't close the script tag that you wrote.

**Note that you can't dynamically load scripts that contain a document.write

Hesione

For this use case this is true but technically you can do synchronous requests in Workers and in onbeforeunload and onunload events. developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/… – Brantbrantford

You can do synchronous requests, but not synchronous script includes. So you could request the script as text and eval it synchronously, but that probably isn't something that I'd recommend. – Hesione

Answer 3

You should be able to use .getScript()

Edit: Cross-domain requests are always loaded asynchronously in jQuery.

Lanate

As far as I know getScript only works file asynchronously. I want synchronous loading. – Revoke

Ah you are correct, after digging through it. jQuery.getScript() is just a proxy for jQuery.get(), which is just a proxy for jQuery.ajax(). .ajax() has an async property, but cross-domain requests are always async, so it won't work after all. – Lanate

You may be out of luck with loading them cross-domain using JavaScript. I found bugs.jquery.com/ticket/6557 when trying to find out why async false for cross-domain requests isnt honored. Is loading it server-side an option? – Lanate

Interesting, didn't know about this. – Enrichment

Answer 4

A great library called YepNope exists for loading javascript dependencies from any location - developed by a member of the yayQuery podcast. It can be found here: http://yepnopejs.com/

Anastasiaanastasie

While I'm thrilled that you like yepnope, it's async all the way, just like it should be :D – Hesione

Well, his edit hints at a jQuery plugin - so maybe Yepnope isn't the way to go here, but the overall idea is to fetch and load based on enabled features... this sounds like conditional polyfills. Huge fan, btw. – Anastasiaanastasie

Answer 5

LABjs.js, is nice library. I used it works well.

http://labjs.com/

Quaternity