Inside Technique : Targeting Layers : Preparing Explorer

Internet Explorer supports embedding documents using the IFRAME element. The IFRAME element is included on the page as follows:

<IFRAME NAME=page1 SRC="myPage.htm"><IFRAME>

Different from the Layer tag, the IFrame is not required to be absolutely positioned. It can either exist in the flow of the document, or be positioned using CSS. Since we are looking for common ground between the browsers, we use a stylesheet to position all IFrames:

<STYLE>
  IFRAME {position: absolute}
</STYLE>

To make the IFrame and Layer elements almost completely equal, we also include some inline style information on the IFrame. Below shows how we make the IFrame and Layer the same:

<LAYER LEFT=100 
       TOP=250 
       SRC="myPage.htm" 
       ID=page2 
       ONLOAD="hookupEvents(this)" 
       WIDTH=300>
  <IFRAME 
        STYLE="left: 100px; 
               top: 250px; 
               width: 300px" 
        SRC="test.htm" 
        NAME=page2 
        SCROLLING=no>
  </IFRAME>
</LAYER>

This makes the presentation very close. Notice that the IFrame uses the name attribute instead of ID. This is necessary as the HTML 4.0 defines the IFrame name attribute as identifying the destination for targeted links. This name should be the set to the same value as the ID specified for the corresponding Layer. In addition, to make sure the Layer and IFrame are the same, we duplicate the top, left, and width properties, and disable scrollbars for the IFrame.

While we are almost there without even writing a line of script, there are still two differences between IFrame and Layer that we need to work around. First, even though we did not specify a height, the IFrame does not autogrow to its contents. and instead uses a default height assigned by the browser. Next, the IFrame element lacks an onload event signify the contents of the element are loaded. To test whether the contents are loaded, we need to use a timer and continually test the progress of the IFrames download (There is an onload event that fires on the embedded document, but not that occurs on the container of the document which in this case is the IFrame).

To poll the download state, we created a function that starts a timer and continually checks each frame. Therefore, the function automatically recognizes when a page is loaded, and resizes the IFrame to the contents as well as turns off the IFrames border.

  function checkFrames() {
    var iframes = window.frames
    var numFrames = iframes.length
    for (var i=0; i < numFrames; i++) {
      var f = iframes[i]
      if ((f.document.readyState=="complete") && (f.document.cached==null)) {
        f.document.body.style.border = "none"
        // Make sure we find the IFrame element since 
        // the layer tag has also an ID the
        // same as the IFrames name.
        var elFrame = document.all[f.name].tags("IFRAME")[0]
        elFrame.style.height = f.document.body.scrollHeight
        f.document.cached = true
      }
    }
    setTimeout("checkFrames()",100)
  }
  checkFrames()

You have now seen how we have created the same functionality in both browsers. At this point, we recommend you try our demonstration^{IE4, NS4} This demonstration is designed to run cross-browser. Following the demo, continue with our explanation on how we merged the IE and Netscape code, and read about your first Inside Dynamic HTML homework assignment.

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