molendijk

When we use the technique given below, the following happens when we click on a link (in our HTML-menu) in order to go to a new page (which may belong to a foreign domain):

• bla.html (our own domain) or h ttp://www.blabla.bla (a foreign domain) is included in a dynamically created text/html-object (non-IE) or iframe (IE) (IE doesn't correctly handle the object yet);

• the object/iframe containing the new page (bla.html or h ttp://www.blabla.bla) is automatically added to a file (here: index.html) containing our HTML-menu.

The pages can be bookmarked with the browser's bookmark button ('favorites'). The technique even allows us to bookmark foreign pages that have our own menu on them!

Here's what we need:

• In index.html: everything we need for a standalone HTML-menu.

• In index.html, to prevent weird things from happening in IE:
  <style type="text/css">
body,html{overflow:hidden; height:100%; width:100%}
</style>
  ('overflow: hidden', because we dont't need scrollbars in index.html, but only in the iframe/object loading the 'content pages').

• Also in index.html (head section; choose another name for the js-file if you like):
  <script type="text/javascript" src="dynamically_create_ifrobj.js"></script>
  where the js-file has the following:
  
  Code:

  var longURL = parent.document.URL;
  var shortURL = longURL.substring(longURL.indexOf('?')+1, longURL.length);
  
  /*Below, we have 'page1.html', because it is supposed to be the starting contents page; 
  we have 'index.html', because that's the page containing the html-menu. 
  Adapt to your needs. */
  if (top.location == shortURL) {top.location.href='index.html?page1.html';}
  
  function load(which) {top.location.href='index.html?'+which;}
  
  function createIfrObj(){
  
  if(/*@cc_on!@*/false)//if IE
  {//We can't use on text/html-object for IE, so we use an iframe
  OBJ = document.createElement("iframe");
  OBJ.setAttribute('src',shortURL);
  OBJ.frameBorder=0;
  }
  
  if(/*@cc_on!@*/true)//if non-IE
  {//We can use on text/html-object for non-IE
  OBJ = document.createElement("object");
  OBJ.setAttribute('type','text/html');
  OBJ.setAttribute('data',shortURL);
  }
  
  //This is both for IE and non-IE. Adapt styles to your needs
  OBJ.style.position='absolute';
  OBJ.style.width='74%';
  OBJ.style.height='82%';
  OBJ.style.left='22.5%';
  OBJ.style.top='13%';
  OBJ.style.border='1px dashed red';
  OBJ.style.background='white';
  document.body.appendChild(OBJ);
  }
  
  window.onload=createIfrObj

• Links in the menu in index.html:
  href="javascript: load('page1.html')"
  href="javascript: load('page2.html')"
  href="javascript: load('http://www.google.com')"
  etc.
  (I would have preferred to use javascript in the head only, but the technique doesn't allow to put a real URL in the href: it would ruin the URL in the address bar).

• Links to other pages in the ones that load in the iframe / object (page1.html; page2.html etc.; we cannot control the foreign pages):
  href="#null" onclick="top.load('page1.html')",
  href="#null" onclick="top.load('page2.html')",
  href="#null" onclick="top.load('http://www.google.com')",
  etc.

• JS in the pages that load in the iframe / object (needed to make sure that they load together with the menu in index.html):
  function orph(){
if (top.location == self.location)
top.location.href="index.html?" + document.URL
}
window.onload=orph;

We could alternatively replace the lines in dynamically_create_ifrobj.js (see above) with the following, using document.write, but it's better to avoid document.write as much as you can:

Code:

var longURL = parent.document.URL;
var shortURL = longURL.substring(longURL.indexOf('?')+1, longURL.length);

/*Below, we have 'page1.html', because it is supposed to be the starting contents page; 
we have 'index.html', because that's the page containing the html-menu. Adapt to your needs. */

if (top.location == shortURL) {top.location.href='index.html?page1.html';}

function load(which) {top.location.href='index.html?'+which;}

if(/*@cc_on!@*/false)//if IE
{//IE doesn't support the text/html-object well, so we use an iframe; adapt styles to your needs
document.write('<iframe style="position:absolute; width:74%; height:82%; left:24.5%; top:13%; border:1px dashed red; background:white;" frameborder=0 src="' + shortURL + '"><\/iframe>');}
else {//We can use on text/html-object for non-IE; adapt styles to your needs
document.write('<object type="text/html" style="position:absolute; width:74%; height:82%; left:22.5%; top:13%; border:1px dashed red; background:white;" frameborder=0 data="' + shortURL + '"><\/object>');}

________________________________________________________________
NOTES:

• This technique won't allow us to use the browser's print button, since the content pages are loaded in an object/iframe. So we should make our own print button for the content's pages.

• In IE, this technique cannot be tested locally (= on the hard disk: the files don't show in the iframe; this does NOT happen on the Internet). So we should use Firefox for local testing.

• This technique doesn't work properly on Mozilla 1.7.5 and Netscape 7.0, which are out of use anyway, so there won't be a major problem.

• When using the DD All Levels Menu on IE7, there's a flicker on the page when we hover the mouse over a main-item having sublinks. I haven't figured out the reason for this yet, which has nothing to do with the technique used here, since the problem does not arise when other menus are used. Note also that there is no flicker in IE6 and IE8.

• The menu used in the demo below as an illustration of the technique is by DynamicDrive (All Levels Menu).

DEMO HERE.
===
Arie.