DOM window open Method
DOM Windows and Related Objects – Part 12
Forward: In this part of the series, we look at the DOM window object open method.
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.
Syntax
The open method of the window object opens a new browser window. The syntaxes are:
window.open()
window.open(URL)
window.open(URL, name)
window.open(URL, name, specs)
window.open(URL, name, specs, replace)
You can use any of these syntaxes to open a new browser window that is different from the current window. The browsers call such an opened window, a pop-up window. If you will not use any preceding parameter in the syntax, then replace it with an empty string, "". The browser may prevent a pop-up window from opening. In that case the browser provides instructions for you to follow and have the pop-up window opened.
Note: Your browser may not respect all the rules exactly as given in this tutorial. Different browsers have slightly different ways of implementing the rules given below. In particular, instead of opening a new browser window, the browser may open a new tab.
Opened Empty Window
To open an empty window, you would type:
window.open()
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
window.open();
</script>
</body>
</html>
You can open a window whose content will be that of a web page, somewhere in the Internet. The first parameter (URL) of the open method allows you to do this. The URL is typed in quotes. Read and try the following code (create another document in the same directory with the name, page1.htm):
<!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>
The name Parameter
The name parameter can be used to give the name of the window or to determine where and how the web page for the window should be opened. This is the second parameter of the open() method. The possible values (each of which has to be typed in quotes) and their meanings are given below:
Value: Meaning
name – With this, you give the name to the window, just as you would give a name to a person. The name should be in quotes.
_blank – With this value, the URL is loaded into a new window. This is the default (which you do not have to type) like in the above code.
_parent – With this, the URL is loaded into the parent frame. This means, any frameset that the window had, is replaced. No new window is created.
_self – With this, the URL replaces the current page and no new window is created.
_top – With this the URL replaces any framesets that may be loaded.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
window.open("page1.htm", "_blank");
</script>
</body>
</html>
This is the third parameter in the open() method. Here, specs, means specifications. specs is a comma separated list of items. An item consists of a reserved word, followed by the assignment operator and then a value. Below are the items and their meanings. You can use more than one item, separated by commas, as the third parameter.
height=pixels: This is the height of the window. Minimum value is 100.
left=pixels: This is the left position of the window.
location=yes|no|1|0 This determines whether or not to display the address field. The default is yes. You type either yes or no or 1 or 0.
menubar=yes|no|1|0: This determines whether or not to display the menu bar. The default is yes.
resizable=yes|no|1|0: This determines whether or not the window is resizable. The default is yes.
scrollbars=yes|no|1|0: This determines whether or not to display scroll bars. The default is yes.
status=yes|no|1|0: This determines whether or not to add a status bar. The default is yes
titlebar=yes|no|1|0: This determines whether or not to display the title bar. The default is yes.
toolbar=yes|no|1|0: This determines whether or not to display the browser toolbar. The default is yes.
width=pixels: The width of the window. Minimum value is 100.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
window.open("page1.htm", "_blank", "width=400,height=300,scrollbars=yes");
</script>
</body>
</html>
This is the fourth parameter of the open() method. Its value is true or false. When it is true the page of the URL replaces the current document in the history list. When it is false, the page of the URL creates a new entry in the history list.
Sending Content to an opened Window
After opening a new window, you can send a document to it at the client. The syntax is:
winRef.document.write(HTML_String)
winRef is the reference returned by the opened method (see below). The opened window has a document into which nothing has been written. The above expression writes into the document.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
htmlString = "<!DOCTYPE HTML><html><head><title>Opened Window</title></head><body><p>paragraph paragraph paragraph</p></body></html>";
myWinRef = window.open("", "_blank", "width=400,height=300,scrollbars=yes");
myWinRef.document.write(htmlString);
myWinRef.focus();
</script>
</body>
</html>
That is it for this part of the series. Let us take a break here. We continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT