Previous Page
Next Page

Opening Multiple Windows Simultaneously

Maybe you want to open more than one window at the same time (and really run the risk of seriously annoying the person browsing your site). You can do that with just a small addition to Script 6.4; you need to add a loop that opens a window every time it goes through the loop, as shown in Script 6.5.

Script 6.5. This script adds a loop to the previous script and opens multiple windows with a single click on a link.

window.onload = newWinLinks;

function newWinLinks() {
     for (var i=0; i<document.links.length; i++) {
        if (document.links[i].className == "newWin") {
            document.links[i].onclick = newWindows;
        }
     }
}

function newWindows() {
     var bookTitles = new Array("dw8","js6e", "ppt");

     for (var i=0; i<bookTitles.length;i++) {
        var imgName = "../images/" + bookTitles[i] + ".jpg";
        var winName = bookTitles[i] + "Win";
        var bookWindow = window.open(imgName, winName,"width=135,height=170");
     }
     return false;
}

To open multiple windows at the same time:

1. 
document.links[i].onclick = newWindows;



In the newWinLinks() function, we've changed the line that was in Script 6.4 to call the newWindows() function, since we're opening more than one window.

2. 
function newWindows() {

  var bookTitles = new Array("dw8", "js6e","ppt");



Begin by creating a new function that will handle opening the multiple windows. Next, create a new array called bookTitles, and populate it with the names of the windows.

3. 
for (var i=0; i<bookTitles. length;i++) {
  var imgName = "../images/" + bookTitles[i] + ".jpg";
  var winName = bookTitles[i] + "Win";
  var bookWindow = window.open (imgName,winName,"width=135, height=170");
}



The loop will execute as many times as there are elements of the bookTitles array, using the length property. The imgName variable contains the constructed path of the images. The winName variable gets the current value of bookTitles and adds Win to it. The bookWindow variable opens the window with the image, adds the window's name, and specifies the window size. The result of all this looping is shown in Figure 6.6.

Figure 6.6. Clicking the link opened all three child windows; the placement was determined by the browser. In this case, Safari opened all three windows on top of one another, and we moved them for clarity's sake.

[View full size image]


Tips

  • The placement of the windows is up to wherever the browser decides to put the windows. If you want to control those locations, Script 6.13 shows how to place a window in a specific location on the screen. See "Opening Windows in a Specified Location," later in this chapter.

  • There's some code in Script 6.4 that's missing from this script, namely bookWindow.focus(). In Script 6.4, it makes the opened window the focus, i.e., the front-most window. But from a user interface standpoint, when multiple windows are opened at once it's not clear where the focus should be.



Previous Page
Next Page