Dear friends,

Have been developing a navigation function for a web site - an icon tray. When the user clicks on an icon, a Javascript loads the corresponding target content (stored in external HTML files) into an inline frame.

Chose to use an iFrame because the page "infrastructure" is so media-rich that a full page reload for every little content pane-update would be undesirable. For the sake of navigability, also decided that each content-pane-possibility needed a unique URL, and that the script would be structured to ask the parent URL what to put in the iFrame. Had to stay strictly client side.

The URL format is domain.com.au/subdirectory/index.html?name_of_content_file_without_html_suffix

This is a diet version of the javascript function:

Code:
// jars_of_sauce.js


	function inTheUrals()	{

		var parentURL = parent.document.URL;

		var contentFrame = document.getElementById('content_frame');

		if (parentURL.indexOf('?') != -1)	{

			contentFrame.src = parentURL.substring(parentURL.indexOf('?')+1,parentURL.length) + ('.html');

		}

		else	{

			contentFrame.src = ('twitter.html');

		}

	}
The relevant tract of index.html is as follows:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

	<script type="text/javascript" src="jars_of_sauce.js"></script>

</head>

<body onload="inTheUrals()">


<iframe id="content_frame" src="twitter.html">Your Browser is Ooga Boogered.</iframe>


<!-- BEGIN ICONS -->

	<div class="icontray" id="slayer">

		<a href="?slayer" class="icontray">SLAYER ESPRESSO</a>

	</div>

	<div class="icontray" id="roasting">

		<a href="?roasting" class="icontray">COFFEE ROASTING</a>

	</div>

	<div class="icontray" id="lab">

		<a href="?lab" class="icontray">SIPHON LAB & POUR-OVER BAR</a>

	</div>

	<div class="icontray" id="twitter">

		<a href="?twitter" class="icontray">TWITTER FEED</a>

	</div>

<!-- END ICONS -->


</body>

</html>
When I first wrote the script, I had a problem. Opera executed it as I had intended, but Firefox & Safari had other ideas: while the content pane was stable in Opera, only reloading when the parent URL changed, in other browsers, the iFrame would reload infinitely, as fast as my processor would permit.

It seems to me that the reason some browsers want to keep reloading the frame is because a function like inTheUrals() is treated as ongoing in Javascript, and the way they deal with the possibility of change in the URL is simply by executing the script over and over again until the page is closed. Each new contentFrame URL that is generated (every time the function runs) would warrant the reloading of the frame in some browsers, but not in Opera. Perhaps Opera is only interested in reloading pages when the URL changes, or it is told explicitly? Or could it be that Opera has a "smarter" way of calculating ongoing functions, whereby it waits for a change in the relevant page behaviour before executing the code again? I would be interested if anybody knows.

This ongoingness is not what I had originally expected. In my plan, the function was to run through once only on page load. It would also be attached to the onClick event handler for the icons, to run (once only) every time an icon was selected. But it wasn't to be... and after many, many hours of experimentation, I still can't work out how it could have been... Suggestions, please?

The thing I really don't understand, though, is how my solution works - eventually solved the problem with a trick borrowed from marss, where I added the line, contentFrame.src = contentFrame.src; to the end of the function. To me it looks as though Javascript hits a meaningless tautology, gets confused and keels over. So the final, and probably most important thing I would like to know is why this stops the iFrame from reloading in Firefox & Safari, and is there a better way?

Thank you for your thoughts.

Regards,

A.C.