Many websites use buttons and badges as a way of adding active content but - how do you deal with conditionally loading of pre-supplied buttons and badges.

This project is a specific application of a more general technique - conditionally loading an inline script.

There are lots of Javascript-based buttons and badges that you can get from various sites and services which you can add to your site by simply copying and pasting the code into the page at the place you want the button to appear. This is also how many banners and advertising networks insert advertising into a web page.

Two typical and very common buttons - but do you want them on every page?

In most cases you can simply use the Javascript and there is nothing else to do but occasionally there is a need to customize what buttons, badges or advertising is on display on a page and the simplest way of doing this is to conditionally load the script.

Javascript doesn't have any meta-commands which allow you to test a condition and either load or don't load a script. However it is possible to use the write method of the document object to modify what Javascript is included in the page.

Conditional loading with Document.write

If you recall the document write method can be used to send HTML elements to the current document and so add to the HTML making up the page.

For example:

document.write("Hello World");

sends the text "Hello World" to the document. The text is inserted at the location of the script in the page.

That is the Javascript is inline and executed as soon as the browser reaches it in while reading the page. If you defer a document.write until the whole page is loaded, for example as part of a button click handler then the entire page is cleared and the document is started again with whatever you write to it.

Most badges and buttons use the document.write method to send their HTML to the document so inserting their functionality into the page at the location of the script. This is why they are implemented as in-line scripts because what they generate is inserted where the script is positioned.

The trick with conditionally loading a script is to notice that a document.write method can write a <script> tag into the document and the browser will obey that tag. This seems almost crazy when you first encounter it but it is very reasonable. The browser executes the in-line script and inserts any HTML that the script generates a the position of the script. When the in-line script completes the browser then parses the HTML that the script generated. If that HTML includes another <script> tag then the browser deals with this in the usual way. If this turns out to be another in-line script then what it generates is inserted into the document at the location of the script. When the new in-line script has finished the browser starts to parse the new inserted HTML and so on...

For example, consider the following, strange looking code:

<script language="javascript" 
                type="text/javascript">
document.write("<script 
    language='javascript' 
    type='text/javascript'>");
document.write("alert('Hello World');");
document.write("<\/script>");
</script>

Notice that first instruction writes a <script> tag into the document followed by a single Javascript instruction and a closing tag. What is written into the document by this script is:

<script language='javascript' 
   type='text/javascript'>
  alert('Hello World');
</script>

and when the first script has finished the script it created is obeyed and you will see an alert box pop-up.

That is:

• using document.write you can inject another script into a web page at the time the page is being parsed by the browser and the injected script will be executed before the browser moves on.

The only complication is that you need to  use double quotes to start and stop the string and single quotes within the string to avoid having to use the escape character to quote a quote.  (The strings also have to be entered without line breaks.)

For example, not

 "alert("Hello World");"

but

 "alert('Hello World');"

and you have to escape the closing tags backslash to stop it being interpreted as the end of the first scripted.  That is, not

 "</script>"

but

 "<\/script>"

The example given above isn't very useful and doesn't really hint at what this sort of dynamic script loading could be used for. Moreover, it is slightly worrying because it raises the possibility of the first script injecting a second script which, injects another and so on. However, apart from being disquieting, this is all fine.

For example, Firefox will load each of the scripts you inject and run them in the order you injected them. IE ,on the other hand starts them all loading and runs them in the order that they become ready to run. 

If you stick to the rule that each script only injects one other script then the order problem goes away and the injected scripts are run in the same order as the inline scripts.

<ASIN:0596517742>

<ASIN:0321572602>

<ASIN:0596806752>

<ASIN:0596517742>

<ASIN:1590597273>

<ASIN:059680279X>

<ASIN:0596805527>