Nested JavaScript inclusions and IE

Consider the following scenario: file.html contains inline JS code to load remote.js and call a function in remote.js

<br /> <script text="text/javascript"></p> <p>alert('Before loading remote.js'); document.write('<sc'+'ript type="text/javascript" src="remote.js"><\/script>');</p> <p>alert('After loading remote.js'); document.write('<sc'+'ript type="text/javascript">remoteFunction();<\/script>');</p> <p></script><br />

And in remote.js
</p> <p>function remoteFunction() {<br /> alert(‘In remote function’);<br /> }</p> <p>

You would expect the output in this order and Firefox actually honors this order correctly:

1. Before loading remote.js
2. After loading remote.js
3. In remote function

IE on the other hand will give you an error (“Object Expected”) and will call the function prematurely. Meaning that it executes before loading remote.js. This is an unexpected behavior. Fortunately, you can add the attribute defer=”defer”. This will specifically prevent IE from executing and actually produce proper result. Hmm, it’s IE! It has its own style!