Page 1 of 2
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.
Two typical and very common buttons - but do you want them on every 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.
sends the text "Hello World" to the document. The text is inserted at the location of the script in the page.
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:
and when the first script has finished the script it created is obeyed and you will see an alert box pop-up.
- 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
and you have to escape the closing tags backslash to stop it being interpreted as the end of the first scripted. That is, not
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.
More important is the fact that if you do use this technique to load more than one script the order that the scripts are obeyed in isn't defined.
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.