Conditional loading

Now for an example of conditional loading of a script. Suppose you have a script tag something like:

<script src='url.js'/>

then you can convert this into an injected script using:

<script language="javascript" 
            type="text/javascript">
 document.write("<script src='url.js' \/>");
</script>

where you would also have to escape any characters that need it in the url.

This inserts the script into the page in exactly the same place that the original <script> tag did. The advantage of doing it in this way is that we can now write any Javascript we need to around the document.write instruction. For example,

<script language="javascript" 
          type="text/javascript">
if(condition){
 document.write("<script src='url.js' \/>");
}
</script>

This will now only load the script if the condition is true.  There you have it.... conditional loading of an inline script.

As long as you manage to escape all of the characters in the string that need it, so as to create a valid string this works. You also have restrict yourself to conditionally loading one script per explicit script block if you want to guarantee the order in which they are obeyed.

Example 1

Conditionally loading a simple button

As an example consider the Tweetmeme button which is usually loaded into the page using :

<script src="http://tweetmeme.com/i/
  scripts/button.js" type="text/javascript">

To conditionally load the script you would use:

<script language="javascript" 
               type="text/javascript">
var url = window.location.href;
if (!url.match("start=")) {
 var src = "<script src='http://
    tweetmeme.com/i/scripts/button.js' 
     type='text/javascript'\/>";
 document.write(src);
}
</script>

This only loads the script if the page url doesn't contain "start=". The reason for this condition is that in some PHP generated articles the first page has a standard URL but subsequent pages have "start=1" and so on for each page. By detecting the string "start=" the Tweetmeme button is only loaded on the first page of a multi-page article.

Example 2

Conditionally loading two buttons

In this case the temptation is to put the two script injections into a single <script> block. This isn't a good idea because the order that the injected scripts are executed isn't defined - and this means that the buttons might be positioned on the page in any order.

The correct way to do it is to use two <script> blocks.

For example, consider the Tweetmeme button combined with the Addthis button. This is also slightly more complicated in that that Addthis button takes the form of an image with a link to the site and a script that hooks into the image's hover event.

The standard inline way of adding and Addthis button is

<a class="addthis_button" 
  href="http://www.addthis.com/
    bookmark.php?v=250&amp;
    username=username">
  <img src="http://s7.addthis.com/
         static/btn/v2/lg-share-en.gif" 
    alt="Bookmark and Share" 
    style="border: 0;" 
    width="125" 
    height="16" /></a>
<script src="http://s7.addthis.com/
   js/250/addthis_widget.js#
    username=username" 
  type="text/javascript"></script>

This can be made conditional using the same techniques as described above:

<script language="javascript" 
         type="text/javascript">
var url = window.location.href;
if (!url.match("start=")) {

First we inject the <img> tag:

var addthisimg = "<a class='addthis_button' 
  href='http://www.addthis.com/bookmark.php?
    v=250&amp;username=username'>
  <img src='http://s7.addthis.com/
   static/btn/v2/lg-share-en.gif' 
   alt='Bookmark and Share' 
   style='border: 0;' 
   width='125' 
   height='16' \/><\/a>";
 document.write(addthisimg);

Next we inject the script which makes use of the image tag:

 var addthisscript = "<script 
  src='http://s7.addthis.com/js/250/
     addthis_widget.js#username=username'
        type='text/javascript'>
  <\/script>";
 document.write(addthisscript);
}
</script>

Now we add a script that loads the Tweetmeme button, which is identical to the one listed earlier:

<script language="javascript" 
          type="text/javascript">
var url = window.location.href;
if (!url.match("start=")) {
 var src = "<script src='http://
    tweetmeme.com/i/scripts/button.js' 
     type='text/javascript' \/>";
 document.write(src);
}
</script>

As you can see we have to repeat the if statement and the temptation if to push this script injection ito the previous <script> block and do the test only once. Don't try this however as it will cause problems in some browsers. The best you can do is to perform the test once and store the result in a global variable which can be tested in the following if statement.

Notice that you can conditionally write other HTML formatting such as <div>s complete with style if you want to control the layout of the buttons. The only real difficult is in making sure that you have entered the string correctly with appropriate escaped characters.

Joomla conditional buttons

Finally it is worth pointing out that you can conditionally load inline scripts within Joomla without having to make modifications to the template, index.php or write a new module.

All you have to do is enter the code listed above into a custom HTML module, set the modules position and the inline Javascript will be conditionally loaded into the location of the module.

Where next

There is still a problem with inline script. Suppose the source of the button (or whatever) is offline or slow. Then your page will pause for perhaps seconds while th browser waits for the script to load. This isn't good and in most cases you would be well advised to avoid in-line scripts and never use write.document method.

The correct thing to do is mark a location in the DOM where the script should generate its code and then defer the script load until after the page is complete. This is the appropriate Ajax approach to the problem but inline scripts that generate badges, buttons and advertising isn't under your control and this presents a more difficult problem which seems to be impossible to solve because of cross site scripting restrictions. Put simply you can't download an in-line script using Ajax methods because it doesn't come from the same domain as the page it is being loaded into. Perhaps with some thought there might be a way round the problem but at the moment I haven't found it.

More projects

<ASIN:0470684143>

<ASIN:0470684143>

<ASIN:0137054890>

<ASIN:0470526912>

<ASIN:1449381871>

<ASIN:1430230541>

<ASIN:0321683919>