Loading JS file dynamically with callback function for IE

HI All I have come across a requirement of

Dynamically loading the Javascript file On request.

Its pretty Simple Code

Loading Script

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2.         function loadScript() {  
3.             var script = document.createElement("script");  
4.             script.type = "text/javascript";  
5.             script.src = 'JScriptDynamic.js';  
6.             document.body.appendChild(script);  
7.         }  
8.         window.onload = loadScript;  
9. </script>  

<script type="text/javascript"> function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = 'JScriptDynamic.js'; document.body.appendChild(script); } window.onload = loadScript; </script>

JScriptDynamic.js

view plaincopy to clipboardprint?

1. $(function(){  
2. alert('FileLoaded');  
3. })  

$(function(){ alert('FileLoaded'); })

Now I am happy the file is loaded and i get alert saying

FileLoaded

now lets try to change the code little bit

Loading Script

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2.         function loadScript() {  
3.             var script = document.createElement("script");  
4.             script.type = "text/javascript";  
5.             script.src = 'JScriptDynamic.js';  
6.             document.body.appendChild(script);  
7.             alertload();  
8.         }  
9.         window.onload = loadScript;  
10.     </script>  

<script type="text/javascript"> function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = 'JScriptDynamic.js'; document.body.appendChild(script); alertload(); } window.onload = loadScript; </script>

JScriptDynamic.js

view plaincopy to clipboardprint?

1. function alertload()  
2. {  
3.  alert(FileLoaded);  
4. }  

function alertload() { alert(FileLoaded); }

boom we got a error @alertload();

Microsoft JScript runtime error: Object expected

Lets Dig...Why Does this happen? Ok:) no digging and ploughing its pretty simple logic

JScriptDynamic.js

not yet loaded
So what can we do now?
we know every DOM has a ONLOAD event so lets try this

Loading Script

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2.         function loadScript() {  
3.             var script = document.createElement("script");  
4.             script.type = "text/javascript";  
5.             script.src = 'JScriptDynamic.js';  
6.             document.body.appendChild(script);  
7.             script.onload = function () {  
8.                 alertme();  
9.             }  
10.         }  
11.         window.onload = loadScript;  
12. </script>  

<script type="text/javascript"> function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = 'JScript1.js'; document.body.appendChild(script); script.onload = function () { alertme(); } } window.onload = loadScript; </script>

JScriptDynamic.js

view plaincopy to clipboardprint?

1. function alertload()  
2. {  
3.  alert(FileLoaded);  
4. }  

function alertload() { alert(FileLoaded); }

Yahoo..... Google chrome Showed the alert Now As most of the users still use IE,we need a test on IE
LET THE TEST BEGIN

its been 2 MIN !!!!!!!!!!!!!!!!!!!!!!!!!!!!! Where is my alert BOX?

don't worry IE Doesn't support onload for script element so we have a work around

Loading Script

view plaincopy to clipboardprint?

1. function loadScript( ) {  
2.        var script = document.createElement("script");  
3.        script.type = "text/javascript";  
4.        script.src = "JScriptDynamic.js";  
5.        document.body.appendChild(script);  
6.        var browser = navigator.appName;  
7.        if (browser = "Microsoft Internet Explorer") {  
8.            ieLoadBugFix(script, function () {  
9.                //alert('IE');  
10.                alertload();  
11.            });  
12.        }  
13.        else {  
14.            script.onload = function () {  
15.                //alert('nonIE');  
16.                alertload()  
17.            }  
18.                }  
19.    }  

function loadScript( ) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "JScriptDynamic"; document.body.appendChild(script); var browser = navigator.appName; if (browser = "Microsoft Internet Explorer") { ieLoadBugFix(script, function () { //alert('IE'); alertload(); }); } else { script.onload = function () { //alert('nonIE'); alertload() } } }

IE FIX CODE

view plaincopy to clipboardprint?

1. function ieLoadBugFix(scriptElement, callback) {  
2.     if (scriptElement.readyState == 'loaded' || scriptElement.readyState == 'completed') {  
3.         callback();  
4.     } else {  
5.         setTimeout(function () { ieLoadBugFix(scriptElement, callback); }, 100);  
6.     }  
7. }  

function ieLoadBugFix(scriptElement, callback) { if (scriptElement.readyState == 'loaded' || scriptElement.readyState == 'completed') { callback(); } else { setTimeout(function () { ieLoadBugFix(scriptElement, callback); }, 100); } }

Now the Above code will work in all the Browsers. Happy Coding :)