Subscribe to
the Possibilities Ezine

Subscription Terms of Service
Privacy Policy

Most Recent
Software Additions

Go Short URL

Create short URLs with your own control panel, on your own server, and all your short URLs will have your own domain name.

Secure View and Remove

Remove the data from your secure server safely, without compromising your customer's trust.

Survey Lite

Provides an opportunity for your visitors to give you feedback on the subjects you want to hear about.

Attention Ticker

Scrolling text banner is perfect for special offers... news feeds... syndication to other sites ...

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:

<script type="text/javascript" language="JavaScript" src="http://example.com/cgi-bin/software.cgi"> </script>

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 /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:

<script type="text/javascript" language="JavaScript"> document.write('<h3>Here I am!</h3>'); document.write('<h1>Here I am, again!</h1>'); </script>

There are two differences:

1. The JavaScript to retrieve and insert an external file of JavaScript code has an src attribute with the external file's URL.

2. 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:

<script type="text/javascript" language="JavaScript"> document.write('<sc'+'ript'); document.write(' type="text/javascript"'); document.write(' language="JavaScript"'); document.write(' src="http://example.com/cgi-bin/software.cgi'); document.write('?'+escape(location.href)+'">'); document.write('</sc'+'ript>'); </script>

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:

1. The web page source code is less cluttered.

2. 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.

If you wish, you can use the following for the software.cgi program:

#!/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.

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Type your response here. Thank you.

Powered by "Real Time Reader Feedback" from WebSite's Secret.

Will Bontrager
©Copyright 2006 Bontrager Connection, LLC Bontrager Connection, LLC

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

© 1998-2001 William and Mari Bontrager
© 2001-2008 Bontrager Connection, LLC