Dynamic External JavaScript Files

By Will Bontrager
2006-08-16

Dynamic External JavaScript Files

JavaScript can be embedded within the source code of a web page. Or, it can be in a file somewhere else and a special JavaScript tag used to insert the file when the web page is loaded into a browser.

That external JavaScript file can be plain text or it can be generated with a CGI program.

The way to insert an external JavaScript file is by putting a JavaScript tag like this into the source code of a web page:

The above will insert into the web page source code whatever the software.cgi program provides.

The URL in the JavaScript can have parameters. For example,

src="http://example.com/cgi-bin/software.cgi?name=Will"

would give the software.cgi program the information that "name" is "Will". The software.cgi program can then generate JavaScript differently than it otherwise would have.

But that parameter is static. What the source code contains is what the source code contains. It's always the same.

This article shows how to change parameters on-the-fly so the software.cgi program can generate JavaScript customized for the information it receives.

It is truly dynamic.

When URL http://example.com/page.html is used to access a web page, there are no parameters to send to the software.cgi program.

However, a URL with parameters such as http://example.com/page.html?name=Will&email=me@example.com provides information software.cgi can use.

A live example is at http://willmaster.com/lucky (which redirects to a "Daily Lucky Numbers" page).

When you first arrive, the web page URL has no parameters. Without parameters, the LuckyNumbers.cgi program generates JavaScript for a daily lucky numbers form. The form is inserted into the page.

When the form is used, it is submitted as method GET to the same web page.

(It could be submitted to a different web page. But this daily lucky number software was designed so others could provide the service to their visitors by using the same JavaScript.)

With method GET, the parameters are appended to the end of the URL.

The web page is then accessed by a URL with parameters. When LuckyNumbers.cgi sees parameters, it generates JavaScript for a daily lucky numbers chart, instead of a form.

Getting the web page URL parameters appended to the external JavaScript file URL is the tricky part.

JavaScript code embedded in a web page is constructed differently than JavaScript that retrieves an external file and inserts it into the web page.

The JavaScript at the beginning of this article is an example for retrieving and inserting an external file.

JavaScript code embedded in a web page would look something like this:

There are two differences:

The JavaScript to retrieve and insert an external file of JavaScript code has an src attribute with the external file's URL.
The JavaScript with code embedded in a web page has the code between the <script... and </script> tags.

It requires JavaScript code to extract the web page URL parameters and append them to the external JavaScript URL. And it has to be done before the external JavaScript is retrieved.

The problem was solved by creating JavaScript with code embedded in a web page that writes JavaScript to retrieve and insert an external file.

Before your mind ties itself into knots, have a look at the code:

You can see JavaScript code is writing JavaScript code.

The script tags are broken up so the browser doesn't try to run them as real script tags, until after the code has been written to the web page. Once written to the web page, the script tags are rejoined.

JavaScript code to retrieve and insert an external file is often used in lieu of embedding the code directly into the web page for one or both of 2 reasons:

The web page source code is less cluttered.
Any changes to the JavaScript working code only need to be done in the one external file.

In that spirit, we'll send the entire web page URL to the software.cgi program and let it deal with parsing of parameters. The above JavaScript does that in the line containing

escape(location.href)

The "location.href" is the URL used to load the web page, complete with any parameters.

The escape() function encodes the URL for transmission.

The software.cgi program then receives one parameter, which is the encoded URL used to access the web page.

#!/usr/bin/perl
use strict;
my %In = ();

sub Parse
{
   my $fixed = $ENV{QUERY_STRING};
   $fixed =~ tr/+/ /;
   $fixed =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;
   ($In{HomeURL},$In{URLParameters}) = split /\?/,$fixed,2;
   for(split /&/,$In{URLParameters})
   {
      my ($n,$v) = split /=/,$_,2;
      $v =~ tr/+/ /;
      $v =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;
      $In{$n} = $v;
   }
} # end of sub Parse

Parse;
print "Content-type: text/javascript\n\n";
for(sort keys %In)
{
print "document.write('Key $_ is $In{$_}<br>');"
}
# end of script

The subroutine "Parse" is where the received parameters are separated and stored in variables. The rest of the script simply generates JavaScript code to print the parameters back to the web page.

Follow normal Perl CGI installation practices -- edit with a plain text word processor, upload with an FTP program as plain text, give uploaded file 755 permissions.

Once software.cgi is installed, load the web page with the JavaScript into your browser. Then load it again with ?hello appended to the URL. Then try ?a=b&c=d to see what happens.

It's fun to play with.

This article covered the basics.

If you have a project in mind that requires the web page URL parameters be sent to a CGI program, the software.cgi program above can be used as a start.

Tutorial Pages:
» Dynamic External JavaScript Files

Copyright 2004 Bontrager Connection, LLC

| Write For Us

Related Tutorials:
» JavaScript Debugging Techniques with Firebug
» Striped Tables Using JavaScript
» Opening PDFs in a New Window with JavaScript
» Essential Javascript -- A Javascript Tutorial
» Submit Forms Conditionally using JavaScript
» How to Setup a Randomising Function