Javascript Pop-up Window Objects

The javascript pop-up window object refers to the web browser, and all of the items you can see within it. This tutorial will explain how objects are used to create a pop-up window, and the various properties and methods available. Properties are sub-objects which are a part of another object. Methods are the different ways you can do things. Javascript pop-up window object properties refer to: window name, window size, window address, etc. Javascript pop-up window object methods refer to: open, close, scroll, move, resize, alert, etc.

You need to at least specify for a blank window to open. Here is how you open a blank window: window.open()
(This will open a blank window, and use all of the default settings).

The best way to display a window with a particular: size, color, menu, toolbar, object, etc. is to create a function, and call it when either: a link is clicked, when an object is clicked, or for an onload event.

Below is a pop-up window that displays another website in a smaller window:

<html>
<head>
<script type="text/javascript">
function WindowE()
{
window.open("http://www.videogamedeals.com", "WinE", "width=650,height=500,toolbar=no,resizable=yes")
}
</script>
</head>
<body>
<a href="javascript:WindowE()">Click Here</a>
</body>
</html>

Free ASP Scripts
Click Here!

We created a pop-up window with a width of 650 pixels wide, and a height of 500 pixels high. It displays the website: VideoGameDeals.com. The name of the window is 'WinE', and it is resizable because we set that option to 'yes', however it won't display the toolbar because we set that option to 'no'. This window has been created using a function. When this webpage loads, all you will see is the 'Click Here' link (which calls the function that creates the window). Here is the result: Click Here.

When creating a javascript pop-up window, remember the following syntax: window.open("url", "windowName", "windowAttributes").

URL > specifies the domain name for a website.
WindowName > refers to the name of the javascript window object.
WindowAttributes > are the various options such as: toolbar, statusbar, scrollbars, etc.

Here are a list of attributes for your pop-up window:

width	height	toolbar
location	directories	status
scrollbars	resizable	menubar

Below is a pop-up window that uses all of the various attributes listed above:

<html>
<head>
<script type="text/javascript">
function WindowC()
{
window.open("http://www.videogamedeals.com", "WinC", "width=550,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no, scrollbars=no,resizable=yes,copyhistory=no")
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="WindowC()">
</form>
</body>
</html>

Cheap ASP Hosting
Click Here!

This pop-up window displays the website: VideoGameDeals.com again, and sets all of the attributes to no (which means that this window will not display any of those named attributes). Also, we are using a button to call the function that creates the window. Below is the result (Click-on this gray rectangular button):

Below is a complete list of Properties and Methods available for javascript pop-up window objects:

Property	Description	Syntax
Closed	Returns boolean value to determine if a window has been closed	window.closed
defaultStatus	Defines the default message displayed in a window's statusbar	window.defaultStatus(="message")
document	Defines the document to be displayed in a window	window.document
frames	Returns an array containing references to all the named child frames in the current window	window.frames(="frameId")
history	Returns the history list of visited URLs	window.history
innerHeight	Returns the height of a window's display area	window.innerHeight = value
innerWidth	Returns the width of a window's display area	window.innerWidth = value
length	Returns the number of frames in a window	window.length
location	The URL of a website loaded into a window	window.location
locationbar	A window's location bar (the property is visible)	window.locationbar.visible=false
menubar	A window's menu bar (the property is visible)	window.menubar.visible=false
name	Used to set, or return a window's name	window.name
opener	The name of a window opened in a current window	window.opener
outerHeight	Used to return the height of the outer area of a window	window.outerHeight
outerWidth	Used to return the width of the outer area of a window	window.outerWidth
pageXOffset	Used to return the X-coordinate of a current window	window.pageXOffset
pageYOffset	Used to return the Y-coordinate of a current window	window.pageYOffset
parent	The name of a window containing a particular window	window.parent
personalbar	Returns boolean value indicating the visibility of the directories bar	window.personalbar.visible=false
scrollbars	Returns boolean value indicating the visibility of the scrollbars bar	window.scrollbars.visible=false
self	Used to refer to current window	self.method
status	The message displayed in a window's status bar	window.method="message"
statusbar	Returns boolean value indicating visibility of the status bar	window.statusbar.visible=false
toolbar	Returns boolean value indicating visibility of the tool bar	window.toolbar.visible=false
top	Used to return the name of top-most window	window.top
window	Used to return the current window	window.[property]or[method]
Method	Description	Syntax
alert(message)	Displays a text string on a dialog box	alert("Type message here")
back()	Loads previous page in the window	window.back()
blur()	Removes the focus from a window	window.blur()
captureEvents()	Sets a window to capture all events of a specified type	window.captureEvent(eventType)
clearTimeout()	Clears a timeout (set with the setTimeout method)	window.clearTimeout(timeoutID)
close()	Used to close a window	window.close()
confirm(message)	Displays a confirmation dialog box with a text message	confirm("type message here")
disableExternalCapture/ enableExternalCapture	Disables/Enables external event capturing	window.disableExternalCapture( )/ window.enableExternalCapture( )
focus()	Used to give focus to a window	window.focus()
forward()	Loads the next page in a window	window.forward()
handleEvent(event)	Invokes the event handler for a specified event	window.handleEvent(eventID)
moveBy(horizontal, vertical)	Moves a window by the amount specified in the horizontal and vertical directions	window.moveBy(HorValue, VerValue)
moveTo(x, y)	This method moves the window's left edge and top edge to the specified x and y coordinates	moveTo(Xposition,Yposition)
open()	Used to open a window	window.open(url, name, attributes)
print()	Displays a print dialog box	window.print()
prompt(message, defaultValue)	Displays a prompt dialog box	window.prompt("Type message here", value)
releaseEvents(event)	Release any captured events of a specified type	window.releaseEvents(eventType)
resizeBy(horizontal, vertical)	Resizes a window by the specified horizontal and vertical amounts	window.resizeBy(HorValue, VerValue)
resizeTo(width, height)	Resizes a window to the specified width and height amounts	window.resizeTo(widthValue,heightValue)
scroll(x, y)	Scrolls the window to the specified coordinates	window.scroll(xValue, yValue)
scrollBy(x, y)	Scrolls the window's content area by the specified coordinates	window.scrollBy(HorValue, VerValue)
scrollTo(x, y)	Scrolls the window's content area to the specified coordinates	window.scrollTo(xValue, yValue)
setInterval(expression, time)	Evaluates an expression in milliseconds	window.setIntervals(expression, milliseconds)
stop()	Used to stop a window from loading	window.stop()

String, Date, & Array objects

Home