Webkit threading javascript file loadsand execution order

Question

I am trying to building a XSS widget and am having issues with Webkit browsers loading the external javascript files which I am appending into the dom. It works as below:

• Widget.js appends 3 javascript files into the dom (jquery, data, content)
• Jquery.js is standard jquery with a custom namespace
• Data.js is a javascript array
• Content.js is a set of jQuery instructions to build the widget based off the data in Data.js

In firefox the browser does exactly 100% of the time what im telling it and the widget loads where ever you placed the include javascript on the page.

However in Webkit ie Safari, the browser returns the 3 files in a random order, and executes once returned. This means that when Content.js looks for $ to do jquery magic it fails. Likewise if jQuery is available and it loads the data late if fails due to lack of data.

Suggestions please?

Answer 1

The best way to do this is to just concatenate the files on the server--that way you go from making 3 http requests to one, and the scripts are parsed and executed together.

If you can't do that, do you have to add the script tags by appending them to the dom? If you just added them in HTML, it should work:

<script src="widget.js"></script>
<script src="jquery.js"></script>
<!--etc -->

Answer 2

Putting js files in any order won't work. I am also still searching a workaround other then server side combining.