Previous Page
Next Page

Creating New Pages with JavaScript

Previous multiple-window examples in this chapter used more than one HTML file to create the different windows. But there's no need to do that, since you can embed HTML within a script and create a new HTML page on the fly. This is especially useful because you can use the power of JavaScript to fill the new page with dynamic content. Changing the contents of a page under JavaScript control is the basis of many Web applications. To get your feet wet, Script 6.9 is a fairly simple example; we'll load a page (Figure 6.9) that creates a new child HTML page and then increment a loop that adds 100 lines of text to the child page (Figure 6.10).

Script 6.9. You can create new HTML pages entirely under scripted control.

[View full width]
window.onload = initWindows;

function initWindows() {
     var newText, newBr;
     var newWindow = window.open("","newWin", "location,scrollbars,resizable=yes, 
width=300,height=300");
     var newDoc = newWindow.document;

     newDoc.title = "Generated Window";
     newDoc.bgColor = "#000000";
     newDoc.fgColor = "#FFFFFF";
     newDoc.body.innerHTML = "<h2>This window shows the result from the other window <\/
h2><div id='looper'> </div>";

     var loopDiv = newDoc.getElementById ("looper");

     for (var i=0; i<100; i++) {
        newText = newDoc.createTextNode ("The loop is now at: " + i);
        newBr = newDoc.createElement("br");

        loopDiv.appendChild(newText);
        loopDiv.appendChild(newBr);
     }
}

Figure 6.9. This parent window is writing into the child window...


Figure 6.10. ...and the child window shows the result.


To create a new page with JavaScript:

1. 
[View full width]
var newText, newBr;
var newWindow = window.open("", "newWin","location,scrollbars, resizable=yes,width=300,
 height=300");



In the initWindows() function, we declare two new variables, newText and newBr. The following line opens the new window, sets its parameters, and assigns it to the variable newWindow.

2. 
var newDoc = newWindow.document;



This new variable, newDoc, stores our new window's document object, which we'll change in the next step.

3. 
[View full width]
newDoc.title = "Generated Window";
newDoc.bgColor = "#000000";
newDoc.fgColor = "#FFFFFF";
newDoc.body.innerHTML = "<h2>This window shows the result from the other window<\/h2><div 
id= 'looper'> </div>";



This is the cool part, where we set the properties of the newDoc object (in other words, the contents of the window we've created). We can set that new document's title, background color, foreground color, and body.innerHTML (the contents of the document's body tag) to be whatever we want. In this case, we're generating the HTML headers and the first part of the page body (Figure 6.10).

4. 
var loopDiv = newDoc.getElementById ("looper");



You probably noticed that the div at the end of the last step has the id "looper"that's the div that we're going to be adding to shortly. To do that, we create and set the new loopDiv variable.

5. 
for (i=0; i<100; i++) {



We're starting a loop with the counter variable i. Set i to zero to begin; then, as long as i is less than 100, we increment the value of i by 1.

6. 
newText = newDoc.createTextNode ("The loop is now at: " + i);
newBr = newDoc.createElement("br");



We need to create elements that we can then add to the looper div. Previously in this chapter, we've changed innerHTML, which overwrites what's already in that div. In this case, though, we want to add on, not overwrite. The two built-in functions, createTextNode() and createElement(), allow us to respectively create a text node and an element (in this case, a <br /> element) on the fly.

7. 
loopDiv.appendChild(newText);
loopDiv.appendChild(newBr);



Once those elements have been created, they can be added to the div by doing an appendChild() with the contents of the two variables we set previously. Using appendChild() and other methods of manipulating nodes will be covered in more depth in Chapter 12.

Once they're added, we're still in the loop, so we loop around again until the counter in step 5 hits 100.


Previous Page
Next Page