-
Featured Columnists
- Faruk Ateş
- Andy Clarke
-
Kris Hadlock
- Designing with Code: Providing Feedback
- Designing With Code: Creating a Resizable Interface
- Designing With Code: CSS Tips and Tricks to Speed Your Workflow
- Designing with Code: Handling PNG Transparency on the Web
- Designing With Code: Collaboration
- Designing With Code: Improving CraigsList
- Designing With Code: How to Create a Tag Cloud
- Designing with Code: RSS
- Designing With Code: Tumblelogging
- Designing With Code: Create a DropIn JavaScript Component
- Designing with Code: Leveraging Your Existing Content
- Designing With Code: Leveraging RSS
- Designing With Code: Converting Forms to Ajax
- Designing with Code: Converting Forms to Ajax, Part 2
- Designing With Code: Monster Mash
- How to Create Dynamic Script Tags for Ajax Components
- Creating a Winning Proposal for Web Projects
- Creating a Web Design Questionnaire
- Using Stylesheets in Flash CS3
- Animating with XML in Flash CS3
- Creating a Full-Screen Web Site with Flash CS3
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
-
Table of Contents
- Welcome
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Layouts
- Forms
- Meta Tags and Search
- Usability
- Accessibility
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Multimedia
- Content
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Tools
- Tutorials
- Intellectual Property for Web Designers
How to Create Dynamic Script Tags for Ajax Components
Last updated Oct 17, 2003.
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.
