Now more than a year has passed and technologies are evolved. Now the web is full of very powerful AJAX frameworks and much probably, for medium/big projects you won’t need this kind of “hack” anymore. But there are few developers across the world that still hand-code their little ajax tricks and needs this. So, since I received a lot of comments about that, I’m writing here again to update you about the modifies that have been done to that script.

That script suffered of a (relatively) big problem: if you had a document.write() call in the external script you loaded, well, it won’t work. Jeremy Bell has modified that script in order to have this functionality included. You can see it working at http://www.blackoutwebdesign.com/ajax.demo.php.

For other discussion about the topic, look at the comments in the post, they have been very helpful to me to correct various compatibility issues.

function execJS(node)
{
  var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
  var bOpera = (navigator.userAgent.indexOf('Opera') != -1);
  var bMoz = (navigator.appName == 'Netscape');

  if (!node) return;

  /* IE wants it uppercase */
  var st = node.getElementsByTagName('SCRIPT');
  var strExec;

  for(var i=0;i<st.length; i++)
  {
    if (bSaf) {
      strExec = st[i].innerHTML;
      st[i].innerHTML = "";
    } else if (bOpera) {
      strExec = st[i].text;
      st[i].text = "";
    } else if (bMoz) {
      strExec = st[i].textContent;
      st[i].textContent = "";
    } else {
      strExec = st[i].text;
      st[i].text = "";
    }

    try {
      var x = document.createElement("script");
      x.type = "text/javascript";

      /* In IE we must use .text! */
      if ((bSaf) || (bOpera) || (bMoz))
        x.innerHTML = strExec;
      else x.text = strExec;

      document.getElementsByTagName("head")[0].appendChild(x);
    } catch(e) {
      alert(e);
    }
  }
};

I tested it only under firefox, but it should work on other browsers too. If it doesn’t, let me know.

Update (October 1st, 2006): now it works under Internet Explorer too (if you want to inject some text in a script element in IE you can’t use .innerHTML, but you have to use .text!)

There’s an issue I’ve been facing against that just got me crazy: if I include a HTML page (not really, a php generated one to be precise) through innerHTML the content that was into the <script>...</script> tags was not executed. After some google-ing, I found that this is a security implementation: browsers doesn’t allow code to be executed into a innerHTML block. If you break a moment and think about it, it makes perfectly sense, but I need of such a feature so I had to found a workaround.

The idea was this: let threat the html page as an xml file (although it is really one), so let use the DOM to browse it looking for <script></script>, then pass its content to eval().
I was not using any AJAX library, so I had to wrote all the code by myself. Here is a snippet:

function execJS(node) {
       var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
       var bOpera = (navigator.userAgent.indexOf('Opera') != -1);
       var bMoz = (navigator.appName == 'Netscape');

var st = node.getElementsByTagName('SCRIPT');
       var strExec;

for(var i=0;i<st.length; i++) {
               if (bSaf) {
                       strExec = st[i].innerHTML;
               } else if (bOpera) {
                       strExec = st[i].text;
               } else if (bMoz) {
                       strExec = st[i].textContent;
               } else {
                       strExec = st[i].text;
               }

try {
                       eval(strExec);
               } catch(e) {
                       alert(e);
               }
       }
}

function handlePageChanging()
{
       if (http.readyState == 4) {
               var cnt_big = document.getElementById('cnt_big');
               cnt_big.innerHTML = http.responseText;

execJS(cnt_big);
               hideLoading();
               doLinks();
       }
}

function changeContentPage(param)
{
       _current = param;

var url = param + '&aJ=y';
       showLoading();
       http.open("GET", url, true);
       http.onreadystatechange = handlePageChanging;
       http.send(null);
}

Of course you can’t copy and paste this code except the execJS function (since it is this post’s purpose) but the important thing is that you notice how it works. Pratically, the page makes an AJAX request with changeContentPage(), then handle it through handlePageChanging(). So when we’re going to set up the content with innerHTML, we call execJS() so it will eval()-ize all the <script></script> contents.

Update: see this http://kratcode.blogspot.com/2006/03/javascript-script-execution-in.html