carters-site.net

IE8 Javascript external script execution order solution.

The lack of posts lately has been due to the fact that I have had way too much going on around me. Fixing up one house to sell and adding a new room into my house has kept my out of work time to a minimum. That being said I came across an interesting problem the other day that I felt needed a small post about.

Problem:
Many ad serving networks rely on JavaScript to deliver their ad code to the page.   The method typically employed to generate the code to the page is document.write('the ad code');  Well this is fine if the code is all present on the page and not relying on external scripts.   What happens though when the ad itself relies on an external script in and embeds code inline.  For example:

<script language='javascript'>

document.write('<scr' + 'ipt type="text/javascript" src="http://domain.com/generated_external_script.php?param1=foo&param2=foobar"></script>');

 

document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">insertAdInto("ad-placeholder");</scr' + 'ipt'>');  

 

</script>

In this case the external script is a javaScript function that will render itself into an element that was passed. In this case it is an element we are dynamically adding to the page. In most browsers this will work because they will wait to run the JavaScript command after the external script has been loaded. Internet Explorer though runs JavaScript as it parse the page. This means when it encounters insertAdInto("ad-placeholder"); It may or may not exist which will create an error. (In most cases it will not exist.)

Solution:

I tried different solutions one involving the use of "defer" attribute as part of the script tag. (Which did not work). I decided to simply suffer the gross solution. Using the setInterval() method I need to keep checking the function until it exists. So it looks something like this.

document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">insertAdInto("ad-placeholder");</scr' + 'ipt'>');  

</script>

Becomes:

document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">nmSpace_itvlId = setInterval(function(){ if(typeof insertAdInto == "function"){ insertAdInto("ad-placeholder"); clearTimeout(nmSpace_itvlId); }}, 100);

</scr' + 'ipt'>');  

</script>

Or in a more readable manner:

nmSpace_itvlId = setInterval(function(){
   if(typeof insertAdInto == "function"){
      insertAdInto("ad-placeholder");
      clearTimeout(nmSpace_itvlId);
   }
}, 100);

This allowed me to place ad code into dynamically created elements of from a document.write using a callback from an external JavaScript method. I tested this in all browsers and I hope it is useful to others.

Tags: browser compatability, code example, dynmic elements, IE8, internet explorer, Javascript, javascript execution order, programming

Saturday, November 14th, 2009 javascript, programming