Question

I want to give a minimal js code to random websites so that they can add a widget.

The code needs to run after the main page loads and include a parameter with the domain name. ( I don’t want to hardcode it)

One option is to add this code just before the </body> (so It will run after the page loads):

<script type='text/javascript' id='widget_script'>       document.getElementById('widget_script').src=location.protocol.toLowerCase()+'//mywebsite.com/?u='+encodeURIComponent(window.location.host);         </script> 

This works in IE but not in Firefox. I see with Firebug that the src property is created correctly but the script from my site is not loaded.

My question is : what is the best way to do that ? (preferably by putting minimal lines on the header part.)

To further clarify the question: If I put a script on the header part, how do I make it run after it is loaded and the main page is loaded? If I use onload event in my script I may miss it because it may load after the onload event was fired.

Answer 1

You probably want to be implementing the non-blocking script technique. Essentially instead of modifying the src of a script, you’re going to create and append a whole new script element.

Good write up here and there are standard ways to do this in YUI and jQuery. It’s quite straightforward with only one gotcha which is well understood (and documented at that link).

Oh and this:

One option is to add this code just before the </body> (so It will run after the page loads):

…is not technically true: you’re just making your script the last thing in the loading order.