River2 Blog

News and updates about the River2 aggregator.

How JavaScript includes work

I’ve long felt that HTML should have an “include file” mechanism similar to the one that many programming languages have. When I lobbied for it in the early days of the web, the people at Netscape and Microsoft said they feared it would we abused. I didn’t think that was much of an argument because people were copying HTML anyway. View-source was one of the best things about the web. If you wanted to understand how something worked, it was always just a matter of looking to see how they did it.

Finally they relented, or maybe it was just an accident, a door they forgot to close, because with JavaScript they gave us the ability to incude a script within a page. And a script can generate text. So you just have to come up with a way to turn your HTML text into a script. It’s a very simple thing, even though it seems like an unnecessary step — you can automate it so it’s not a big deal.

I wanted to show the members of the Thursday evening group how this works, because we’re going to use this technique in nyblogs.org, to allow us to include the result of the aggregator inside a WordPress blog. But first a simpler example.

Create a text file on your hard disk, and call it test.html. Add this code to the file:

<html><body><script type="text/javascript" src="http://static.newsriver.org/afp/js/randomThumb.js"></script></body></html>

Save it, then drag the file’s icon onto Firefox (or whatever browser you use) and you should see an image on the page. If you click the image it’ll take you to the full version of the page. And if you wait a few minutes and refresh the page, the image will be different.

This is how the random image in the right margin on scripting.com is implemented.

I have a process on one of my servers that generates the randomThumb.js file and puts it in the same place every time. Try entering the URL of the script into the address bar of your browser.


http://static.newsriver.org/afp/js/randomThumb.js

And do a View Source.

You’ll see a “document.write” statement, and inside it — a bit of HTML. That’s the extra step I had to do to make this work. Instead of HTML code, the file contains JavaScript code, and it in turn generates the HTML we want to appear in the page. Convoluted, but it works. (This is what programmers call a klooge.)

2 Responses to How JavaScript includes work

  1. Nelson Armstrong May 4, 2010 at 10:11 am

    Including script as shown slows down page load time and potentially dings your rank on Google. You should use async script load instead (script creates new script element in head pointing to source, loaded script jams html into named element on page).

  2. Pingback: JavaScript includes in River2 « River2 Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: