Question

I have the following code layout

<script src="http://some.javascript/file.js"></script> // This should load first
<script language="JavaScript">
    document.write('<SCR'+'IPT language="JavaScript1.1" SRC="http://a.link.to.an.external.url/that/returns/a/full/html/page/including/some/javascript">'); // This should load second
    document.write('</SCR'+'IPT>');
</script>

MyJavascriptFunctionThatDependsOnStuffLoadedFromThe.documentWritePage(); <!-- Those files above should have loaded before this call -->

I know that it looks weird. Let’s assume that it HAS to look like that for reasons that don’t affect how the JS gets loaded. This does not need to work across browsers — just WebKit browsers.

How do I make sure each of those documents loads completely before the next one? That is, how do I make sure that these documents load synchronously so that the function call at the end can assume appropriate state?

Answer 1

JavaScript files should load sequentially and block so unless the scripts you are depending on are doing something unusual all you should need to do is load application.js after the other files.

Cross-domain scripts are loaded after scripts of site itself, this is why you get errors.

You could add event listener and load your js files on this event, something like this:

function addJavaScript( js, onload ) {
   var head, ref;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = js;
   script.addEventListener( "load", onload, false );
   head.appendChild(script);
}