javascript window.open function

Thewindow.open()function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes thewindow.open()function.

HTML & JavaScript Code: 
<head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>

Display:

CLICK ME TOO!

This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window thatpopsup.

javascript window.open arguments

There are three arguments that thewindow.openfunction takes:

  1. The relative or absolute URL of the webpage to be opened.
  2. The text name for the window.
  3. A long string that contains all the different properties of the window.

Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:

  • dependent– Subwindow closes if the parent window (the window that opened it) closes
  • fullscreen– Display browser in fullscreen mode
  • height– The height of the new window, in pixels
  • width– The width of the new window, in pixels
  • left– Pixel offset from the left side of the screen
  • top– Pixel offset from the top of the screen
  • resizable– Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox.
  • status– Display or don’t display the status bar

Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.

upgraded javascript popup window!

Now that we have the tools, let’s make a sophisticated JavaScript popup window that we can be proud of!

HTML & JavaScript Code:

<head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.com/", "myWindow", 
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body>

Display:

CLICK ME TOO!

Now, that is a prime example of a worthless popup! When you make your own, try to have them relate to your content, like a small popup with no navigation that just gives the definition or explanation of a word, sentence, or picture!