These two methods are used for focusing in windows. The blur() method moves the window to the background, behind the main window. The focus() method moves the window to the foreground, on top of the others ("bringing it into focus").
Place the following script in an external file (which is preferable) or the
<head> area of a test document. Placing the script in an external
file is preferable because, as with style sheets, it keeps it separate from
the actual structure and content of the document. Several scripts can be placed
in one external file. Just make sure the names of the variables and functions
are not the same. If so, you can just change the names so they won't conflict
with the other scripts.
(Note: in the script below, the colored lines within the winContent function should each be all on one line, i.e., the green lines should all be together on one line, the red lines should all be together on one line.)
var newWin;
function checkWin() {
if (!newWin || newWin.closed) {
newWin=window.open("","","width=300,height=250");
setTimeout("winContent()",100);
}
else {
newWin.focus();
}
}
function winContent() {
var content = "<html><head><title>The Other Window
<\/title><\/head><body>";
content += "<h2>It Worked!<\/h2>";
content += "<p>This window is a sub window of the
main one that opened it.";
content += "<form><input type='button'
value='Bring Main Window to Front',
onclick='self.opener.focus()'><p>";
content += "<input type='button'
value='Move This Window to Back'
onclick='self.blur()'><p>";
content += "<input type='button'
value='Close This Window' onclick='self.close()'>";
content += "<\/form><\/body><\/html>";
newWin.document.write(content);
newWin.document.close();
}
Then, place the following code in the body of the page (the code in brown should all be on one line.).
Let's break this down and see what's happening here. It's really not as complicated
as it seems due to the wrapping of several lines. In the function winContent()
and in the code to be placed in the body of the page, each line of a different
color should be combined on one line. Use the button below to see it as it is
supposed to be written.
In the order which the script is executed, we first declared a variable
named newWin but did not initialize it. A value will be
assigned to it later. If we didn't declare it here, we would get an
error when we checked to see if the window using this variable was open.
Next, the portion placed in the body of the page creates a button which uses the onClick event handler to call the function checkWin(). You'll recall that I said a function does not do anything until it's called.
Moving back up to the function checkWin(), the first thing we did was to create an if/else statement.
We checked to see if the variable newWin had opened
a window. The statement says, "If the variable newWin
does not exist (using the Boolean operator !,
meaning "not") or (using the Boolean operator ||)
the window named newWin is closed, then open a new window
300 pixels wide and 250 pixels high." (The open() method
is described in greater detail in another section
of this installment.)
The script then takes a pause to allow the window in the Internet
Explorer browser to finish opening. JavaScript's setTimeout()
method specifies an amount of time to delay before evaluating an expression,
in this case a call to the function winContent. The second
argument indicates a delay of 100 milliseconds. This method literally
tells the script, "Wait 100 milliseconds before executing the function
winContent." Without the timeout, many versions of IE
might not finish loading the entire window before attempting to execute
the winContent function. (The setTimeout()
method is described in greater detail in another
section of this installment.)
The if/else statement then says, "if the variable newWin has already opened a window, the focus is to be placed in that window."
Next, we created the function called winContent. The purpose of this function is to create content for the window that was just opened using the function checkWin.
Our first line of code declares a variable named content and initializes it. The value is the HTML coding for the head section of the newly opened window.
Next, we have six lines of code that are to be added to the body
of the newly opened window, ending with the closing HTML elements.
(Remember, each colored line should be combined with the same colored
lines below it.) Use the popup window above to see the unformatted
code. The operator += means to add to the existing
content. After the variable content is declared and
initialized, each consecutive line adds its value to the preceding
one. In this case, it builds a Web page. The code content
+= literally says, "Take the value of the variable content
and add to it (concatenate) the following value given in
double quotes."
Then the value of the variable content is written into the
new window using the document.write method. Remember,
we read these type of statements backwards, so this one would read,
"Take the value of the variable content and write
it into the document portion of the variable newWin
(which is now a window)."
Then, finally, using the document.close method, the writing to the new window is stopped.
These two methods, blur() and focus() are very useful when working with multiple windows, allowing you to move back and forth between the windows.
