Loading the pages of a site in an iframe (=this box) and putting everything that should always be visible in a central (main) page (= the area surrounding this box). The central page 'stays there' on page transition and the iframe's urls are dynamically written in a div on top of the central page.



General:
(Before reading this page, you may want to shoot the bird. Its presence is distracting. But see end of page).
Flicker on page transition may occur with IE9 and Google Chrome, notably, even when the pages of a site don't have 'a lot to load'. View this page, for instance, and click the links (using IE9 and/or Google Chrome).
There used to be a way to stop the flicker in IE, but that doesn't work anymore in version 9. Loading all the pages of a site in an iframe is a way to solve the problem, because then the central (main) page doesn't have to change. But this creates problems that have to do with printing the pages, bookmarking them and showing the correct URL in the address bar. Fortunately, these problems can be overcome (more or less).

Printing iframed pages:
We can't use the browser's button to print iframed pages because the visible part only of these pages will be sent to the printer. But there's a javascript solution. We just put this in our central page (named index.html here).

Bookmarking iframed pages:
We can't use the browser's button to bookmark ('add to favorites') iframed pages because the URL of an iframed page doesn't appear in the address bar. One way to solve this problem is to put a button on our central page that can be clicked on so as to lead the visitor to a new page having its own URL and containing the contents of the iframed page he may want to bookmark (This is the only time we leave the central page; we'll take the flicker for granted - if there is flicker). The button should have onclick="location.href=parent.frames['ifr'].location.href to allow us to accomplish this (we must have ifr because the iframe in which the pages are loaded has name='ifr', see below). After the visitor has clicked on the button and has arrived at the bookmarkable page, he must be informed about how to bookmark the page (and possibly about other relevant things). This can be done by adding certain info that is not present on the page itself. On this very site, I accomplished this by putting <script src="bm.js"></script> on each individual page that is loaded in the iframe (here: page1. html, page2.html and page3.html, see navigation menu).

Putting the URL of the iframed pages somewhere on the central page:
Loading the pages of a site in an iframe has the disadvantage of not informing the visitor about the URLS of each individual page he is viewing: they don't appear in the address bar (see above). So we must find a way to show them elsewhere. The central page is an appropriate candidate. On this site, I solved the problem by putting this script on the central page. It will only work if we have a div with id="correct_url" somewhere on the page. Also, the iframe that loads the iframed pages must have onload="correct_url()" and name="ifr" (see below).

The iframe:
The iframe (in the central page) should look like this:
<div style="position: absolute; left:150px; right:150px; top:100px; bottom: 80px">
<iframe name="ifr" style="position:absolute;width: 100%;height:100%; border: 1px solid gray; background:white" frameborder="0" src="page1.html" onload="correct_url()"></iframe>
</div>

The links:
Central page:
<a href="page1.html" target="ifr">page 1</a>
<a href="page2.html" target="ifr">page 2</a>
etc.
Iframed pages:
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
etc.

Demo:
This site.

Important:
In IE (and perhaps in certain other browsers too) this only works on your local machine (offline) if your pages have a valid doctype. In Google Chrome, it only works correctly on the internet (online).

Final remarks:
If the pages of your site don't flicker (to be checked in Google Chrome and IE9), don't use the technique explained above. It's always better to use standard methods rather than non-standard ones if the latter don't impose themselves.
UNLESS:
unless you don't want something to stop when you go from one page to another, like letting a bird fly. The bird script should be put, then, on the central page.

© Arie Molendijk, classical-music.tk.