Scrolling HTML Basics, Part III: Loading an External HTML File - www.docjavascript.com

Loading An External HTML File

Perhaps the most notable inconsistency between the browsers is by the way you can load an external HTML file to a dynamic HTML element. The challenge is pretty simple in Netscape Navigator. You just create a new layer and assign the external file name to its src property. The function fillFirstPage() accomplishes this task for the first page:

function fillFirstPage() {
  firstPage = new Layer(canvasWidth - GleftPadding, canvas);
  firstPage.clip.width = canvasWidth - GleftPadding;
  firstPage.src = Gsrc;
}

while the function fillSecondPage() accomplishes the same task for the second page:

function fillSecondPage() {
  secondPage = new Layer(canvasWidth - GleftPadding, canvas);
  secondPage.clip.width = canvasWidth - GleftPadding;
  secondPage.src = Gsrc;
}

The task is much more complicated in Internet Explorer. Internet Explorer suffers from a deficiency that you cannot assign a URL to a Dynamic HTML element's content. You can assign a string to the innerHTML or outerHTML properties of a Dynamic HTML. The solution is to load the external feed onto the page somehow, and then extract the messages from it. We use the IFRAME tag to load the page. Somewhere on your page put:

<IFRAME NAME="scroll" ID="scroll" STYLE="display:none"></IFRAME>

and then detect it from within the script by referring to the named IFRAME tag and assigning the external URL to it. This assignment is done inside startCanvs() function which is loaded first:

function startCanvas() {
  if (NS4) {fillCanvas();}
  else {document.all.tags("IFRAME").item("scroll").src = Gsrc;}
  setTimeout("window.onresize = redo", 1000);
}

The fillCanvs() function is called from the external HTML file in Internet Explorer, and from startCanvs() in Netscape Navigator:

function fillCanvas() {
  if (IE4) {arBody = document.frames("scroll").document.all.tags("BODY");};
  makeCanvas();
  setTimeout("showAndScroll()", Gdelay);
}

The first line extracts the BODY of the external file in Internet Explorer. Since the external file calls this function, any reference to document is a reference to the external file (jscolumns.html). The second line prepares the scrolling canvas, and the third line continues on with the generation of the two pages and their scrolling.

Produced by Yehuda Shiran and Tomer Shiran

Created: December 21, 1998
Revised: May 16, 1999

URL: https://www.webreference.com/js/column32/load.html