The JavaScript Diaries: Part 8/Page 2 | WebReference

The JavaScript Diaries: Part 8/Page 2


[previous] [next]

The JavaScript Diaries: Part 8

By 

blur() and focus()

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").

Borrowing from a script by JavaScript expert Danny Goodman, author of the "JavaScript Bible, 5th Edition," and one we used previously, let's look at how these two methods work. Be sure to try these yourself.

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.).

<form>
<input type="button" name="win" value="Open/Re-Focus Window"
  onClick="checkWin()"><br>
</form>

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.

  1. 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.
  2. 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.
  3. Moving back up to the function checkWin(), the first thing we did was to create an if/else statement.
    1. 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.)
    2. 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.)
    3. The if/else statement then says, "if the variable newWin has already opened a window, the focus is to be placed in that window."
  4. 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.
    1. 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.
    2. 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."
    3. 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)."
    4. 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.




[previous] [next]

Created: August 19, 2005

URL: