Opening a New Browser Window


An often-used interface trick on the Web is opening a new browser window. These pop-up windows are useful for a variety of purposes, including navigation controls, advertisements, and other content that supplements what's in the main window.

In this example (Figure 17.9), three function controls are provided:

  • Open the window. This function opens a new window and brings it to the front of the screen.

  • Close the window. This function closes the window.

  • Toggle the window. This function can both open and close the window. If the window is closed, the function opens a new window and brings it to the front of the screen. If the window is open, the function closes the window.

Figure 17.9. The screen with a pop-up window.


To open and close a new browser window:

1.

index.html


Start a new file, and save it as something like index.html (Code 17.7).



Code 17.7. index.html: the openWindow(), closeWindow(), and toggleWindow() functions open and close a pop-up window.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Opening a New Window</title> <script type="text/javascript"> var newWindow = null; function openWindow(contentURL,windowName,windowWidth,windowHeight) {      widthHeight = 'height=' + windowHeight + ',width=' + windowWidth;      newWindow = window.open(contentURL,windowName,widthHeight);      newWindow.focus() } function closeWindow() {     if (newWindow != null) {     newWindow.close();     newWindow = null;     } } function toggleWindow(contentURL,windowName,windowWidth,windowHeight) {      if (newWindow == null) {         widthHeight = 'height=' + windowHeight + ',width=' + windowWidth;         newWindow = window.open(contentURL,windowName,widthHeight);         newWindow.focus()      }      else {      newWindow.close();      newWindow = null; }} </script> </head> <body onunload="closeWindow();"> <div id="controls"> <b>Window Open Controls</b> || <a onclick=" openWindow(this.href,'myNewWindow', 150, 50); return false;" href="newWindow.html">Open </a>| <a onclick="closeWindow(); return false;" href="#">Close</a> | <a onclick="toggleWindow(this.href,'myNewWindow',150,50); return false;" href="newWindow.html">Toggle </a> </div> </body></html>

This file will contain the controls that open and close the pop-up window. Steps 2 through 7 apply to this file.

2.

var newWindow = null;


Initialize the variable newWindow. This variable will record the current state (open or closed) of the window. null means that the window is closed.

3.

function openWindow(contentURL, windowName, windowWidth, windowHeight) {...}


Add the function openWindow() to your JavaScript. This function opens a new window:

 newWindow = window.open (contentURL, windowName, widthHeight);


It uses the following variables:

  • contentURL for the name of the HTML file to be placed in the new window

  • windowName for the name of the new window

  • windowWidth and windowHeight for the width and height of the new window

The new window is forced to the front of the screen by newWindow.focus().

4.

function closeWindow() {...}


Add the function closeWindow() to your JavaScript.

This function checks to see whether the pop-up window is, in fact, open. If so, the function tells the window to close (newWindow.close()) and sets the newWindow variable to null (closed).

5.

function toggleWindow(contentURL, windowName, windowWidth, windowHeight) {...}


Add the function toggleWindow() to your JavaScript.

This function combines the functions added in Steps 3 and 4 but allows the window to open only if newWindow is equal to null (closed); otherwise, it closes the window.

Modal Problems with Pop-Up Windows

Many site developers who use pop-up windows complain about what mode the window is in when it is being used.

Suppose that you use a pop-up window to allow a visitor to enter information in a form that is then used to update information in the main window. What happens if the visitor doesn't enter the information in the pop-up window, doesn't close the window, and returns to the main page? The system is waiting for information that may never come. The visitor might make other changes and return to the pop-up window, enter the information, and really mess up the system.

My advice is simple. If the pop-up window can cause trouble when left open, place the following code in the <body> tag of the document in the pop-up window:

onblur="self.close();"

This code forces the window to close whenever visitors leave it. They can always open it again from the main page but cannot return directly to this window.


6.

onunload="closeWindow();"


Optionally, you can add an onunload event handler to the body element to force the new window to close when this page (the opening page) is left or closed.

This event handler keeps the pop-up window from hanging around when the user moves on.

7.

openWindow ('newWindow.html','myNewWindow',150,50)


Add a function call to your HTML. This function call can be part of an event handler (as shown in Step 6).

8.

newWindow.html


Start a new file, and save it as something like newWindow.html (Code 17.8). This file will be loaded into the pop-up window. You can add anything to this document that you would normally have in a Web page. Steps 9 through 12 apply to this file.

Code 17.8. newWindow.html: This Web page, which will be used in the pop-up window, includes JavaScript that positions the window and a link to close the window using a local version of the closeWindow() function.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Opening a New Window</title> <script type="text/javascript"> function closeWindow() {      self.close(); } </script> </head> <body onload="window.moveTo(100, 100);" onunload="opener.newWindow = null;"> <p>New Window</p> <p><a onclick="closeWindow(); return false;" href="#">Close Window</a></p> </body></html>

9.

function closeWindow() {...}


Add the function closeWindow() to the JavaScript in this file. When triggered, this function closes the pop-up window.

10.

onload="window.moveTo(100, 100);"


Add an onload event handler to the <body> tag to move the window to a particular position on the screen when it first opens (see the next section of this chapter).

11.

onunload="opener.newWindow = null;"


In the <body> tag, include an onunload event handler that sets the variable newWindow in the opening window to null if this window is closed.

This variable tells the opening window when the pop-up window closes.

12.

closeWindow()


Set up a link to trigger closeWindow() so that visitors can close this window when they don't need it anymore.

Tips

  • Keep in mind that a lot of browsers now block pop-up windows unless they are triggered by visitor's click event.

  • Why not always use the toggle version of the open window functions? Generally, toggling the open state of the window is preferable, but sometimes it's useful to have the other two functions, in case you need to make sure the window is either open or closed.

  • I especially like using the closeWindow() function if I'm using a frame to create my Web site. I place the onunload event in the <frameset> . When the visitor leaves the site and the frame document unloads, the pop-up window also automatically disappears, preventing any model problems (see the sidebar "Modal Problems with Pop-up Windows").





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net