|
Topics
|
The Window Object: Its Properties, Methods, and Events.
12th December 2006
The world is full of objects. Each object can be recognized by its unique property. Every object contains methods and events that help the users to use the object. For example, if you are driving a car or pressing the accelerator, it is an event. The increasing of the speed is a method that is invoked when the accelerator is pressed. In a similar way, JavaScript contains many objects. Each object has its own properties, methods, and events. With the help of these properties, methods, and events, the objects can be used to make a Web page or Web site interactive.
Now, you will see how to use the properties, methods, and events of an object by taking the example of the window object.
The window object consists of different properties, methods, and events that can be used as follows:
- change the content of the window.
- open a new window.
- create and access frames in a multiframe window.
- work with forms, etc.
The following table displays the properties, methods, and events of the window object:
| Properties | Methods | Events | | closed | alert() | onblur | | defaultStatus | back() | ondragdrop | | document | blur() | onfocus | | frames[] | captureEvents() | onload | | history | clearInterval() | onmove | | innerHeight | clearTimeout() | onresize | | innerWidth | close() | onunload | | location | confirm() | | | locationbar | disableExternalCapture() | | | menubar | enableExternalCapture() | | | name | find() | | | onerror | handleEvent() | | | opener | forward() | | | outerHeight | home() | | | outerWidth | moveBy() | | | pageXOffset | moveTo() | | | pageYOffset | focus() | | | parent | open() | | personalbar | print() | | scrollbars | prompt() | | | self | releaseEvents() | | | status | resizeBy() | | | statusbar | resizeTo() | | | toolbar | routeEvent() | | | top | scroll() | | | window | scrollBy() | | | scrollTo() | | | setInterval() | | | setTimeout() | | | stop() | |
|
The closed property
The closed property is used to check whether the child window is closed or not. This property returns a boolean value. It returns true if the window is closed.
var nwind=null
function op()
{
nwind=window.open("","hello")
if(nwind.closed==true)
{
nwind=window.open("","hello")
}
}
function cld()
{
if(nwind.closed==false)
{
nwind.close()
}
}
The defaultStatus property
This defaultStatus property is used to put a default text at the statusbar of the browser window. If the mouse pointer moves over a link, the status bar text changes to the path of the URL. On removing the mouse pointer, the text changes back to the default text.
function defstat()
{
window.defaultStatus="It is my program"
}
The document property
The document property is related to the content area of the window. It is used to access the objects that are contained in it. For example, a form and its elements.
The frames property
The frames property is an array of frames. In a multiframe window, this property is used to access a frame according to its number in the window.
If a window contains two frames, their index value will be 0 and 1.
Following is the syntax to access the frames:
top.frames[0]
parent.frames[0]
The history property
The history property of the window object is the history object. The browser maintains the list of all the URLs that are accessed during the surfing of the Internet. In JavaScript, this list is maintained by the history object. A script can methodically navigate to each URL in the history by a relative number or by stepping back one URL at a time.
The innerHeight and innerWidth properties
The innerHeight and innerWidth properties are related to the dimensions of the content area of the window. These properties are used to set or get the width and height of the content area of the document.
The location property
The location property represents the location of the URL of the currently open window or of a specific frame. A multiframe window displays the URL of the topmost window in the location field. To get the URL of a frame, the user should use the frame reference before the location object.
For example:
parent.framename.location
The locationbar property
The locationbar property refers to the addressbar where the URL of the current window is displayed. In Internet Explorer, it is called the addressbar and the property used is location, not locationbar. The locationbar is the property of the Netscape browser.
The menubar property
The menubar property refers to the menubar of the browser window.
The personalbar property
The personalbar property refers to the personal bar in the Netscape browser. The personalbar is known as directories in the Internet Explorer.
The scrollbars property
The scrollbars property refers to the horizontal and the vertical scrollbars of the browser window.
The statusbar property
The statusbar property is used to display the statusbar of the browser window. In the Netscape browser, the property is called statusbar, and in Internet Explorer, it is called status.
The toolbar property
The toolbar property is used to display the standard toolbar of the browser window.
The opener property
When a new window is created from the original window, the new window can access the properties and functions of the original window by the opener property.
The syntax of using the opener property is as follows:
opener.propertyname
opener.functionname
The outerHeight and outerWidth properties
The outerHeight and outerWidth properties are related to the dimensions of the browser window. These properties are used to get or set the width and height of the browser window.
The pageXOffset and pageYOffset properties
The pageXOffset and pageYOffset properties refer to the coordinate system of the content area of the browser window. The pageXOffset refers to the x-position and the pageYOffset refers to the y-position corner of the content area.
The parent property
The parent property is used to access the property of the parent frame from a child frame. If a window contains a frameset, the browser window is the parent of the frame. If the child frameset contains another frameset, this means that the window consists of three generations.
The following is the syntax:
parent.propertyname
The self property
The self property refers to the current window or frame that contains the object. It can be used to access the property of the same window or frame.
The following is the syntax:
self.propertyname
The status property
The status property is used to write some text in the statusbar of the browser window. This property displays the URL of the Web page that is being loaded in the browser window.
The syntax is as follows:
window.status="The string"
The top property
The top property refers to the topmost window in a multiframe window. It is the first window that defines the first frameset. It is the parent of all frames and all the frames can access the properties of the topmost window by using the top property.
For example:
top.propertyname
The window property
The window property refers to the same window object.
The alert() method
The alert method is used to display a warning message for the user if he has made any mistake. For example, in form validation, the user can be warned for entering wrong data in a field.
The syntax of using the alert method is as follows:
alert("string")
The back() and forward() methods
The back method is used to move to the previous page from the current page. It has the same function as the back navigation button in the standard toolbar of the browser. The back method works only in the Netscape browser.
window.back()
The forward method is used to move to the next page from the current page. It has the same function as the forward navigation button in the standard toolbar of the browser. The back method works only in Netscape browser.
window.forward()
The blur() method
When the blur method is invoked, the current window loses the focus.
window.blur()
The captureEvents() method
The captureEvents method takes one or more event types as parameter. The event type that is captured by the window object triggers the function invoked on that event handler.
The syntax of using the captureEvents function is as follows:
window.captureEvents(event_type_list)
The clearInterval() and setInterval() methods
The setInterval method is used to execute an expression with a fixed number of time delay between the call to that expression.
The syntax is as follows:
window.setInterval("function_name",delay)
The clearInterval is used to turn off the loop started by the setInterval method.
The syntax is as follows:
window.clearInterval(intervalId)
The clearTimeout() and setTimeout() methods
The setTimeout method is used to set a certain amount of time for a function to be executed.
The syntax is as follows:
window.setTimeout("function_name",delay)
The clearTimeout method is used to cancel the timer that is set by the clearTimeout method.
The syntax is as follows:
window.clearTimeout(intervalId)
The close() and open() methods
The open method is used to open a window from the main window.
The syntax is as follows:
window.open("URL", "window_name","window_features")
The close method is used to close the window that is opened by the open method.
The syntax is as follows:
window.close()
The confirm() method
The confirm method is used to present a message in a modal dialog box along with the OK and cancel buttons. This dialog box can be used to ask a question to the user about the actions, which, if performed, will not be undoable.
The syntax is as follows:
confirm("message")
The find() method
The find method is used to search a text string within a document.
The syntax is as follows:
window.find("searchstring",matchcase)
The focus() method
The focus method is used to focus a window from a different window.
The syntax is as follows:
window.focus
The moveBy() and moveTo() methods
The moveBy and moveTo methods are used to adjust the position of the window on the screen.
The syntax is as follows:
window.moveBy(x,y)
window.moveTo(x,y)
The print() method
The print method is used to print the hard copy of the contents present in the browser. The print method works in the same way as the print button on the standard toolbar of the browser.
The syntax is as follows:
window.print()
The prompt() method
The prompt method is used to open a dialog box that includes a message from the script author, a field for user entry, and the OK and Cancel bottoms. The script writer can supply a prewritten answer so a user can press the OK button when he is confronted with it.
The syntax is as follows:
prompt("text",defaultValue)
The resizeBy() and resizeTo() methods
The resizeBy and resizeTo methods are used to resize the browser window. The resizeBy method adjusts the window relative to the screen while the resizeTo method resizes the window with absolute position.
The syntax is as follows:
window.reiszeBy(x,y)
window.reiszeTo(x,y)
The scroll, scrollBy, and scrollTo methods
All the three methods are used to navigate within the content of the browser window.
The scroll method scrolls the window according to the coordinates supplied. This method is now deprecated and the scrollTo method is used in its place
The scrollBy method scrolls the window according to the pixels specified.
The scrollTo method scrolls the window according to the coordinates supplied.
The syntax for these methods is as follows:
scroll(x,y)
scrollBy(x,y)
scrollTo(x,y)
The onblur Event Handler
The onblur event handler is fired when a window loses focus.
The onfocus event handler
The onfocus event handler is fired when a window gets the focus.
The ondragdrop event handler
The ondragdrop event handler is fired when a dragdrop occurs on the browser.
The onload Event Handler
The onload event handler is fired when the full document has been loaded on the window.
The onmove event handler
The onmove event handler is fired when a window is moved around the screen.
The onresize event handler
The onresize event handler is fired when the browser window is resized.
The onunload event handler
The onunload event handler is fired when a document is unloaded from a window.
About the Author:
uCertify was formed in 1996 with an aim to offer high quality educational training software and services in the field of information technology to its customers. uCertify provides exam preparation solutions for the certification exams of Microsoft, CIW, CompTIA, Oracle, Sun and other leading IT vendors. To know more about uCertify, please visit http://www.ucertify.com/
|
Ask About This Article
del.icio.us
digg
Furl
Reddit
YahooMyWeb
blogmarks
scuttle
feedmelinks