DOM Window Simple Methods
DOM Windows and Related Objects – Part 8
Forward: In this part of the series, we look at DOM Window Simple Methods.
By: Chrysanthus Date Published: 31 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
The close() Method
The close() method is used to close a window. So, instead of closing the window using file>>exit or clicking the close button of the window, you can close a window using script. The syntax is,
window.close()
Note, the reserved word, window, can be a reference to a window different from the current. Read and try the following code (click the button); the code may not work with your browser if the current window is opened as a tab:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function closeWin()
{
window.close();
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="closeWin()">Click</button>
</body>
</html>
This method sets focus to a window. When a browser window has focus, its title bar is highlighted. The syntax is,
window.focus()
Note, the reserved word, window, can be a reference to a window different from the current. Let us demonstrate this. Save the following code in a directory:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
window.open("page1.htm");
</script>
</body>
</html>
Now, save the next code with the file name, “page1.htm” in the same directory:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function focusWin()
{
opener.focus();
}
</script>
</head>
<body>
<p>paragraph paragraph paragraph</p>
<button type="button" onclick="focusWin()">Click</button>
</body>
</html>
Read the two code samples if you have not already done so. Double-click the first file in the directory. It should open and open a new window. Click the button in the new window, and the first window will receive focus.
The blur() method removes focus from a window. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function blu()
{
window.blur();
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="blu()">Click</button>
</body>
</html>
The print() Method
The print method prints the contents of the window. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function pri()
{
window.print();
}
</script>
</head>
<body>
<p>text text text</p>
<button type="button" onclick="pri()">Click</button>
</body>
</html>
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT