Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

How to Create Dynamic Script Tags for Ajax Components

Last updated Oct 17, 2003.

If youโ€™re looking for more up-to-date information on this topic, please visit our Web Design article, podcast, and store pages.

By Kris Hadlock

If you've ever developed something in JavaScript and wanted to have control over it when it was launched in a remote location, Dynamic Script Tags (DST) are the perfect solution. As you'll learn in this article, DSTs are dynamic because they are script tags added via the Document Object Model (DOM) that allow developers to point to remote JavaScript files. Although standard script tags allow access to remote JavaScript as well, DSTs provide a cleaner, more streamlined approach. This approach increases portability by streamlining setup so that anyone who implements your JavaScript component will be free from adding additional script tags that point to your server.

In this article, you'll learn how to create a DST tag and append it to the head of the local file in order to update JavaScript code from a remote location. Let's take a look at how to create a reusable method, which will create the DST for us by simply passing a fully qualified path to a JavaScript file.

Creating A Reusable DST Method

Creating a DST is as simple as using the DOM to create a script element, adding the type (text/javascript), src, and any other properties that you choose, and appending it to the head or any other location of the web page. Listing 1 provides an example of a reusable DST method.

Listing 1: Creating a Dynamic Script Tag

function DST(url)
{
  var s = document.createElement(’script’);
  s.type=’text/javascript’;
  s.src= url;
  document.getElementsByTagName(’head’)[0].appendChild(s);
} 

This method allows you to pass any url; local or remote, and it can be modified to include any properties that you would like to include.

When And Why DSTs Are Useful

There are many reasons a developer would want to retain control over certain aspects of a component after it's been released to the public. Let's say, for example, you created an Ajax widget that multiple clients will use, but you want to update certain parts of it from a JavaScript file on your server. A DST would be perfect in this situation, as it would enable you to write a script tag dynamically to the Ajax widget and load any file, from any server, at any time.

What kind of external update can you make using a DST? You could update a bug in a component's code and then add a new version number and date that would appear in a right-click menu on the component. You could also go back and add functionality to the component at any time.

That's right, you can actually update code from a remote file, which honestly provides endless opportunities. Again, this is especially important when you have multiple clients using a product and one of those clients comes back to you with a bug he found. With a DST, you only need to update one file that all of these components share, rather than having to release a new version of the component to all of your clients.

You can also use a DST as a bookmark. You can use JavaScript as the URL in a bookmark, which adds a JavaScript file to the current page through a DST. Listing 2 provides an example that takes the code from above and wraps it in a function. You can then use the function to add a script tag to any web page through a bookmark.

Listing 2: Dynamic Script Tag through Bookmarks

javascript:(function(){var%20s%20=%20document.createElement(’script’);s.type=’text/javascript’;s.src= "YOUR URL";document.getElementsByTagName(’head’)[0].appendChild(s);})();

You could use a bookmark with this type of code treatment to create pop-ups on the fly, gather information about a Web page, and so on. In order to use this code, however, be sure to replace the string, "YOUR URL," with a fully qualified JavaScript file path.

What To Watch Out For

If you're using a component that includes DSTs, you need to be aware of the security issues. Allowing a remote file to update code in a component on your server leaves your web site susceptible to remote attacks or the remote script could gather data from your web site without your knowledge. As a JavaScript component developer who uses a DST, it is your responsibility to provide a safe JavaScript file that will be accessed through any dynamic script tags.