Navigare Necesse Est ...
Pompeius (First Century, B.C.)

Navigating on the Web is necessary.
From a job description (Twenty First Century, A.C.)

Got Lost on the Web?

I
N
T
R
O

he ancient Romans did not have Internet but they already knew one of its biggest problems: to recapture the location where your navigation led you.

You are an experienced Web surfer. You just found an interesting article on 'Human Stupidity' but your boss is approaching your desk. A double-click highlights and selects the site's address in the URL box, a Ctrl/C copies it to the clipboard and another click sends the browser to the home page of the corporation's Web site. You may keep on surfing while your boss is breathing in your neck or wants to see something on your computer. Once he left, you retrieve the saved address by pasting it from the clipboard to the address bar but the article of interest just isn't there.

Where have all the pages gone?

ake a simple scenario. You want to share the found article on 'Human Stupidity' with your brother. Sending the copied URL of the visited page in an email will take him to the same article that your browser is displaying now, right? Wrong. OK, you may say, in our fast revolving world sites change fast. They probably restructured their site before your brother could get there. Right? Wrong again.

The above scenarios would only restore simple pages. However, on-line news sources and in general, most web sites build their pages in frames. The address shown in the URL box is that of the frame set. It does not refer to the actual contents of the frames. The present state of the browser is a good example, if you opened it with my book-imitating frame. The frame's file name is default.html. No matter how you go back and forth among the articles, i.e., how you change the content of the main frame, the address bar will show the same reference, to default.html. If you copy and paste the URL from here or from the previous article, you will get a third content, i.e., the opening state of the frame.

There are ways to pick the address of the very article you are seeing now. In Internet Explorer, you need to right-click on the article and take the URL from the Properties window, or, click on the Create Shortcut item that adds an icon to your desktop, which links to the article. Either way, reopening the link will not show the whole page what you have seen, only the content of the right-clicked frame. This may be good in case you don't want to show the surrounding ads to your brother, and may be bad if some other frames contain valuable details. In slightly different ways, one can take the address of the frame's content in Opera and in Netscape, too. In all cases, the problem is that the surfer should know that he is dealing with the content of a frame, not the entire page, and he has to apply special tricks to get the address of that content.

Let's look at the issue from the viewpoint of a Web developer. Do you want to disappoint a visitor of your site, who is intelligent enough to know how to copy and paste the URL of a simple page but not technical enough to know about HTML frames at all? Of course not. Some nice designs don't even show the visitor that the page is constructed in a frame set.

The contradiction comes from the fact that the URL box shows the frame set's address only, no matter how the frames changed their contents after a few clicks on links. There is a way to create a mutual and unambiguous correspondence between the URL and the actual content. In JavaScript terms, the URL box shows the value of the location object. The location object may end with a so-called search string. The search string always starts with a '?' character. Even if there is no search string attached to the location string, the search string has an internal value, namely a '?'. We can store and retrieve the actual state of the frame in the search string. Javascript can access the search string as document.location.search. The rest is finger play. After the file name of the frame set, we can programmatically put a distinctive search string in the URL to reference the content of the changing frame. When pasting the extended URL to the URL box and hitting the Go button, the loaded HTML file should evaluate the search string and load the corresponding file into the adequate frame.

Again, the first part of the URL should contain the address of the frame set file as before and the second part should somehow, not necessarily with its file name, refer to the file that should be displayed inside the frame. Usually, a link that changes the content of a frame does not contain the frame's address and a click on the link does not change the URL box. Now, in the href element of the link we need to provide the frame's address, because we want the URL show it along with the reference to the linked page. It means that links that previously pointed to content files, should point to the frame set file with a search string referring to the content file.

Let's modify the sample files of a previous article, Dynamic Menu Under 10k. It has a frame set called index.html, with a top frame that contains links and with a bottom frame that displays the contents according to the clicked links:

<html>
<head>
<title>Home frame</title>
</head>
<frameset rows="90,*" border="0" framespacing="0" frameborder="no">
<frame src="top_frame.html" name="menu" scrolling="NO" noresize>
<frame src="page0.html" name="content" noresize>
</frameset>
</html>

Code 1. The original index.html.
Clicking the tabs alters the content but leaves the URL unchanged.
Show me the page!

To recognize the search string, a new frame set is created dynamically, according to the search string:

<html>
<head>
<title>Home frame</title>
</head>
<script language="javascript">
var choice=document.location.search;//always starts with a '?'
frmsrc='page0.html'; //default
if (choice.length>1) {//not just the '?'
choice=choice.substring(choice.lastIndexOf('=')+1,choice.length);
frmsrc='page'+choice+'.html?choice='+choice
}
with (document) {
writeln('<frameset rows="90,*" border="0"
framespacing="0" frameborder="no">');
writeln('frame src="top_framesimple.html" name="menu"
scrolling="NO" noresize>');
writeln('frame src="' + frmsrc + '" name="content" noresize>');
writeln('</frameset>');
}
</script>
</html>

Code 2. The modified index.html.
Show me the page!

The URL box accepts the search string ?choice=2 that opens page2.html in the frame. Entering different choices in the URL opens different pages and vice versa. If you open a page by clicking on the corresponding link, the choice of page will be reflected in the URL.

The above changes do not make the URL follow the clicks on the tabs. To make the URL box reflect the displayed page, we should make two more simple changes.

Change the base target in the top_frame.html's head from "content" to "_top":
<base target="_top">
Change the href elements in function DrawMenu() to refer to the frame set with the proper search string:
document.writeln(' href="indexnew.html?choice='+i+'">'+ tabText[i]+'</a></td>');

A third change is necessary to complete the project. The original Javascript code taken from the previous article distinguishes between selected and unselected tabs. The menu drawing function in the sample of this article has been simplified. Switching the images by tab selection has been removed, not to create confusion. One can put it back and make the image switch controlled by the search string, similarly to the content switch of the lower frame. But let this be your homework, folks. Have a good navigation. Ahoy!

Closing thought

Once I brought up the topic, I want to discuss another application of search strings. I will show you how those smart, self-filled emails are created. But this would be the content of another article ...

Summary

The content and the URL of a page do not necessarily correspond when the page is a frame set. The suggested technique creates a mutual and unambiguous correspondence between the URL and the content. This way, a copied URL provides the same content as the original page.

Practice question