ansaurus

Question

JavaScript onload/onreadystatechange not firing when dynamically adding a script tag to the page.

Answer 1

A:

You could always cheat, and put your onload/onreadystatechange logic into a setTimeout(), specifying a duration of 1 ms. Since you're inserting the script element into the DOM, you're guaranteed to see it execute before the timeout.

Example code:

var tag = document.createElement("script");
tag.type = "text/javascript";
tag.src = "http://ajax.microsoft.com/ajax/jquery/jquery-" + version + ".min.js";
document.getElementsByTagName('head')[0].appendChild(tag);
setTimeout(function(){
    __log("info", "test");
}, 1);

jimbojw 2010-05-18 18:16:10

Answer 2

A:

Probably too late for you, but here's how I got round the problem.

Basically, it collects the "$(document).ready(function(){})" and "$(function(){})" calls and runs them after jQuery has finished loading.

Instead of using onLoad, we use setInterval to wait for the variable jQuery to become a function after adding the script tag to <head>

var $_i, $_r = [];
var $ = function(func){
   if(typeof(func) == 'function'){ $_r.push(func); }
   return{ ready: function(func){ $_r.push(func); } }
}
window.onload = function(){
   var s = document.createElement('script');
   s.setAttribute('type', 'text/javascript');
   s.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js');
   document.getElementsByTagName("head")[0].appendChild(s);
   $_i = setInterval(function(){
      if(typeof(jQuery) == 'function'){
         clearInterval($_i);
         for(var i in $_r){
            $_r[i]();
         }
      }
   }, 100);
}

DrKyoushu 2010-10-28 16:27:18

ansaurus

tags:

views:

answers:

JavaScript onload/onreadystatechange not firing when dynamically adding a script tag to the page.

related questions