April 20, 2000 - External HTML Loading | WebReference

April 20, 2000 - External HTML Loading

Yehuda Shiran April 20, 2000
External HTML Loading
Tips: April 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

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. For example, the function fillFirstPage() accomplishes this task for the first page of our scroller:

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

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

function fillSecondPage() {
  secondPage = new Layer(canvasWidth - GleftPadding, canvas);
  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. One 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.

Learn more about our browser-independent scroller in Column 32, Scrolling HTML Basics, Part III: The Cross-Browser Version.