JavaScript and Ajax for the Web, Sixth Edition

2017-07-07 02:10:07

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.

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.

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.

Opening Multiple Windows Simultaneously

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

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.

Категории