DHTML Lab - DHTML Diner - NS4: Loading New Page into Layer from Layer HREF | 5 | WebReference

DHTML Lab - DHTML Diner - NS4: Loading New Page into Layer from Layer HREF | 5

DHTML Lab Logo

This is a Netscape Navigator 4 technique. The in-page examples will only work in Navigator 4, all platforms.

Loading New Page into Layer from Layer HREF

Unlike links in frames, clicked links in positioned elements will load the new page into the full window. If the positioned element is in a frame, then the new page will load into the frame. There are cases where the preferred behavior is to have the new page load into the positioned element that contained the link to it.

There is, of course, an easy, and well-documented method: Have the link in the element call a script that loads the linked page back into the same element. There are two major limitations to this method:

  1. The page in the element must have the relevant script, which means intervention into possibly already-existing pages.
  2. The page will not be suitable for full-window browsing, since the script contained presupposes page existence within a positioned element.

We need to develop a technique that will allow any page to be included in a positioned element, and any link therein to load new pages back into the element.

The Positioned Element

The positioned element that contains the external file can be created, and the file imported, with any of the allowable methods. These include:

  1. Using the LAYER tag and including the external file as the SRC= attribute:
    <LAYER ID="elementName" SRC="extPage.html"></LAYER>
  2. Creating a CSS positioned element with the DIV or SPAN tags:
    <DIV ID="elementName" STYLE="position:absolute"> or
    <SPAN ID="elementName" STYLE="position:absolute">

    and then, after page load, loading the external file, with either the src property or the load() method:

    document.elementName.src = "extPage.html"; or

Whichever route you choose makes no difference to our technique, which assumes an external page loaded into a positioned element. The preferred way is with the Navigator 4 proprietary LAYER tag, since this is a Navigator-only technique to begin with.

Click the link in the following positioned element:

The table of contents page that appears and the three links on it are all external HTML files, loaded with our script. None of the four files has been modified. They could just as easily have appeared in a full window.

The short script is discussed on the next page.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 07, 1998
Revised: May 07, 1998

URL: http://www.webreference.com/dhtml/diner/layerlink/