Inside Technique : Layering Pages : Code

The update functions hide the differences between the two browsers. We use very different approaches in each browser for loading the contents into the page. Netscape Navigator 4.0 supports a direct approach for downloading a file into a positioned element. Each positioned element exposes a src property. While this approach is easy and direct it creates complexities with the scripting model if you need to script the contents. Each positioned element is considered a complete document and is scoped separately. This means anything within the positioned element cannot be referenced directly, but rather needs to be navigated through the positioned element hierarchy.

The approach we use in Internet Explorer is more involved, but the resulting scripting model is left untouched. All elements embedded into the page are accessible directly on the page. In Internet Explorer, we automatically create a hidden IFrame that is used to download the file for the element. Once the document is finished loading, we dynamically pull the contents out of the file and insert them into the document. In Internet Explorer, you can fill the contents of any element, not just a positioned one. However, for cross-browser pages you will need to limit yourself to positioned elements.

updateContents() function

This function directly updates the contents in Netscape Navigator and sets up the update for Internet Explorer.

// Check for the all collection support
var doAll = (document.all!=null)

function getCSSPElement(id) {    
 // Return the positioned element with
 // the specified ID       
 if (doAll)       
  return document.all[id]    
 else
  return document.layers[id]  
}

function checkIFrame(destID) {
 // Get IFrame
 var iframe = 
    document.frames[destID+"target"]
 /* Check if it exists. If not create one 
    in the document. */
 // Create 1 IFrame per positioned DIV.
 if (iframe==null) {
  // Insert at the end of the document
  document.body.insertAdjacentHTML(
    "beforeEnd",
    "<IFRAME 
     STYLE='width: 0pt; height: 0pt' 
     NAME='"+destID+"target' SRC='' 
     ></IFRAME>")
  iframe = document.frames[destID+"target"]
 }
 return iframe
}
 
function updateContents(destID, src) {
 // Update contents of the element
 // Get the positioned element
 var el = getCSSPElement(destID)
 if (doAll) {  //ie4 
  // Get the hidden IFrame or
  // creates one if necessary
  destFrame = checkIFrame(destID)
  // Set the src of the IFrame
  destFrame.location.href = src        
  // Start polling to see if the 
  // document is loaded
  setTimeout("pollIFrame('"+destID+"')",
    200)
 }
 else // ns4
  el.src = src   // Set the source directly
 }

In Netscape Navigator 4.0, nothing more is done. The page is automatically downloaded and inserted into the positioned element. In Internet Explorer 4.0, the pollIFrame() function is called until the IFrame is loaded:

function pollIFrame(destID) {
 var destFrame = checkIFrame(destID)
 // The readyState property returns 
 // the status of the loading page
 if (destFrame.document.readyState
     =='complete') {
  // Finished, copy the contents
  var el = getCSSPElement(destID)
  el.innerHTML = 
    destFrame.document.body.innerHTML
 } else  // Try again in 200 milliseconds
  setTimeout("pollIFrame('"+destID+"')",
    200)        
}

You do not have to wait for each positioned element to finish loading. Multiple elements can be updated simultaneously by calling updateContents(). If you are using Internet Explorer 4.0 or Netscape Navigator 4.0, feel free to try out the demonstration of these functions.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.