the book of javascript 2nd edition phần 3 pot

72 Chapter 5

Table 5-1 lists all the different window.open() features you can play with.

Try experimenting with different ones to see what they do. Except for the

features that deal with pixels (for example, height), all you have to do is type

the feature name inside the third parameter’s quotes. Some of the features

apply to a specific browser—the directories feature, for example, works only

on Netscape.

Some Browsers and Computers Open Windows Differently

The process of opening windows differs slightly depending on the browser and

computer being used. For example, JavaScript windows in Mozilla, Safari, and

Opera browsers are always resizable, so even if you leave that feature out of

the string, the window remains resizable. Another difference is that you

can’t hide the menu bar on a Macintosh.

Closing Windows

If you’ve opened a window called my_window and want to close it later in the

script, use the close() method:

my_window.close();

You’ll recall from Chapter 4 that the word window refers to the window

containing the JavaScript. This means you can also use JavaScript to close

the window that’s actually running the JavaScript, like this:

window.close();

Table 5-1: JavaScript Window Features

Feature Effect

directories Adds buttons such as What’s New and What’s Cool to the menu bar. Some

browsers ignore this feature. Others add different buttons.

height = X Adjusts the height of the window to X pixels.

left = X Places the new window’s left border X pixels from the left edge of the screen.

location Adds a location bar, where the site visitor can enter URLs.

menubar Adds a menu bar.

resizable Controls whether the visitor can resize the window; all Mac windows are

resizable even if you leave this feature out.

scrollbars Adds scroll bars if the contents of the page are bigger than the window.

status Adds a status bar to the bottom of the window. Use the status property of

the window object, discussed later in this chapter, to define what will be

displayed in the status bar.

toolbar Adds a standard toolbar with buttons such as back, forward, and stop.

Which buttons are added depends on the browser being used.

top = X Places the window’s top border X pixels from the top edge of the screen.

width = X Adjusts the window width to X pixels.

Opening and Manipulating Windows 73

This is exactly how the About the Author window on the Book of JavaScript

page works. If you view the source code on the page that loads into one of

the help windows, you’ll see it has a button toward the bottom, labeled Close

Window. If that button were a link, the script would look like this:

<a href = "#" onClick = "window.close(); return false;">Close Window</a>

Figure 5-6 shows how to do the same thing with a button instead of

a link.

<form><input type = "button" value = "Close Window" onClick =

"window.close();"></form>

Figure 5-6: Using a button to close a help window

The primary difference between the code in Figure 5-6 and the simple

link I described is that Figure 5-6 uses a button instead of a link. The button

is a form element that takes an onClick, just as a link does.

Using the Right Name: How Windows See Themselves and

Each Other

Every window is a bit egocentric and thinks of itself as window. Let’s say you

open a web page titled The Original Window. Now let’s say that window opens

a second window, new_window.html (titled The New Window), using JavaScript,

like this:

var new_window =

window.open("new_window.html","new_window","height=100,width=100");

These two windows see each other in different ways. The original win￾dow thinks the new window is called new_window. The new window, however,

thinks of itself as window. This means if you want to close the new window using

JavaScript inside the original window, you’d write this code:

new_window.close();

But to close the new window using JavaScript inside the new window, you’d

write the following in new_window.html:

window.close();

This window-centrism is one of the aspects of object-oriented pro￾gramming that makes it interesting. It’s like dealing with distinct individuals

who have different perspectives on the world.

74 Chapter 5

Moving Windows to the Front or Back of the Screen

Of course, once you’ve opened a window, you can do much more than just

close it. You can move it to the front of the screen (on top of the other windows)

or to the back of the screen (behind all the other windows). The focus() method

brings a window forward, and blur() puts the window in back. The focus()

method is especially useful when you have a window that should always appear

at the front of a screen. For example, if I wanted a small navigation window

to appear over the intro page, I could make all the links using this technique:

<a href = "#" onClick =

"navigation = window.open('http://www.bookofjavascript.com/nav.html','navigation',

'width=605,height=350' );navigation.focus(); return false;">Navigation Window</a>

This line opens the navigation window and brings it up to the front.

NOTE Notice that I didn’t put the word var before the navigation variable when I called

window.open(). If you use var inside a link, JavaScript will forget the name of the

window once it executes the rest of the JavaScript commands in the onClick. The

reason for this will be clearer after you read Chapter 6.

Window Properties

So far we’ve seen four methods for the window object: open(), close(), focus(),

and blur(). Later in the chapter, we’ll explore two somewhat more complicated

methods, resizeto() and move(), both of which involve a little math. First, how￾ever, let’s look at some window properties that come in handy from time

to time.

The status Property

One of the most useful (and most abused) properties is the window’s status.

The value of this property defines what appears in the window’s status bar (see

Figure 5-3). One common status is the URL of a link you are mousing over.

You can use the status property to change what appears in the status bar.

You may have noticed that some people put a kind of marquee in this area,

scrolling across the bottom with messages like Buy our stuff! Buy our stuff!

I don’t want to encourage status bar abuse, so I’m not going to teach you

exactly how to do that, but you can use these JavaScript techniques to create

a similar effect. To change what appears in the status bar of a window, use a

<body> tag like this:

<body onLoad = "window.status = 'hi there!';">

This tag tells JavaScript to change the contents of the window’s status bar

after the page has been fully loaded into the browser.

Opening and Manipulating Windows 75

You might want to use the status property to inform visitors about the

site they’ll see if they click a link. For example, if you have a link to a very

graphics-intensive site, the words Warning: This site has a lot of graphics could

appear in the status bar when the visitor mouses over the link. You can set

this up with an onMouseOver:

<a href = "http://www.myheavygraphicsite.com/" onMouseOver =

"window.status='Warning: This site has a lot of graphics'; return true;">

My Heavy Graphic Site</a>

Notice the return true after the window.status command. This is similar to

the return false I put at the end of my onClick in rollover links (see Chapter 4),

and it does almost the same thing. When the user performs an onMouseOver,

return true prevents the URL from appearing in the status bar. If you don’t

put it there, the words Warning: This site has a lot of graphics flash briefly in the

status bar; then the link’s URL quickly replaces them before the warning can

be seen.

NOTE You might be asking, “Why is it return false in the case of onClick and return true

in the case of onMouseOver?” That’s a good question, and unfortunately there’s no good

answer—that’s just how it is. The best you can do is memorize which goes with which.

The opener Property

When one window opens a new window, the new window remembers its

parent (the original window) using the opener property. An opened window

can access its parent through this property and then manipulate the parent.

For example, if you want a link in the new window to change the contents of

the status bar in the original window, you’d include the following code inside

a link in the new window:

<a href = "#" onClick =

"var my_parent = window.opener; my_parent.status='howdy'; return false;">

put howdy into the status bar of the original window</a>

The first statement inside the onClick says, “Find the window that opened

me, and set the variable my_parent to point to that window.” The second

statement changes the status property of that window to howdy.

Alternatively, you could combine the lines:

<a href = "#" onClick =

"window.opener.status = 'howdy'; return false;"> put howdy into the status

bar of the original window</a>

The opener property is very useful if you want to have a remote control that

affects the contents of the original window. The remote control file (available

at http://www.bookofjavascript.com/Chapter05/the_remote.html) offers an

example of this. Figure 5-7 shows the code that triggers the remote control.

76 Chapter 5

<html>

<head>

<title>The Controlled Window</title>

<script type = "text/javascript">

<!-- hide me from older browsers

// open the control panel window

var control_window =

window.open("the_remote.html","control_window","width=100,height=100");

// show me -->

</script>

</head>

<body>

Use the remote control to send various web pages to this window.

</body>

</html>

Figure 5-7: The code for the window that calls the remote control

NOTE Some people install pop-up blocking software on their computers or set their browsers to

block pop-up windows. Because the JavaScript in Figure 5-7 opens a window automat￾ically (without the user having to click a link), it qualifies as a pop-up window, and

computers that block pop-ups will prevent the window from opening. If the above Java￾Script doesn’t work on your computer, it may be because you have blocked pop-ups.

The code in Figure 5-7 opens a window and loads the web page called

the_remote.html, which is shown in Figure 5-8. Figure 5-9 shows you the code

for the_remote.html.

o

Figure 5-8: The page that calls the remote control, and the

remote control itself

<html>

<head>

<title>Remote Control</title>

</head>

<body>

X <a href = "#"

onClick = "window.opener.location.href='http://www.nytimes.com/';

window.focus();">NY Times</a><br>