Scrolling HTML Basics, Part II: Dyanmic HTML Element Manipulation - www.docjavascript.com
   |
URL Manipulation
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, as we have explained in column 13, Scrolling JavaScript Banners:
whichEl.innerHTML = newsStr;But strings are not flexible enough. Our algorithm calls for feeding firstPage and secondPage from an external file that can be updated from time to time. 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:
and then detect it from within the script by homing on the first IFRAME tag of the page and assigning the external URL to it:
document.all.tags("IFRAME").item(0).src = 'jscolumns3ie.html';We want now to extract the HTML content of the file and insert it in firstPage and secondPage. The problem is that we cannot access the external file until it is loaded. But how can we know the external file is loaded? We have solved this problem by adding the onload event handler to the external file and coded the event handler to call a function in its parent window, thus allowing the continuation of the algorithm. Here is the event handler in the external file:
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var pause = 100;
function start() {
setTimeout("parent.fillCanvas()", pause);
}
window.onload = start;
//-->
</SCRIPT>The fillCanvas() function is in the main page's script. The external file calls the main page after a pause number of milliseconds. We found this delay to be crucial in assuring a single call to fillCanvas().
In the main page, the sequence of events are as follows. First, the onload event is defined as:
onload = startCanvas; The function startCanvas() includes a single line in which it assigns the external file to the IFRAME tag:
function startCanvas() {
if (NS4) return;
document.all.tags("IFRAME").item(0).src = 'jscolumns3ie.html';
}Nothing happens then, until the external file (jscolumns3ie.html) calls the fillCanvas() function, triggering the continuation of the code:
function fillCanvas() {
arBody = document.frames(0).document.all.tags("BODY");
makeCanvas();
showMessage();
scrollPages();
}The first line extracts the BODY of the external file. Since the external file calls this function, any reference to document is a reference to the external file (jscolumns3ie.html). We then insert the BODY of the external file into firstPage and secondPage, by writing the DIV tags:
var text = '<DIV ID="canvas" STYLE="position:absolute">';
text += '<DIV ID="firstPage" STYLE="position:absolute">'
+ arBody[0].innerHTML + '</DIV>';
// (The above two lines should be joined as one line.
// They have been split for formatting purposes.)
text += '<DIV ID="secondPage" STYLE="position:absolute">'
+ arBody[0].innerHTML + '<DIV>';
// (The above two lines should be joined as one line.
// They have been split for formatting purposes.)
text += '<';
Produced by Yehuda Shiran and Tomer Shiran
Created: December 7, 1998
Revised: December 7, 1998
URL: https://www.webreference.com/js/column31/url.html
Find a programming school near you