Home > Developer > JavaScript
JavaScript-window object usage example
The window object is the top-level object in the JavaScript browser object model. It contains multiple common methods and attributes. The following describes how to use the window object.
The window object is the top-level object in the JavaScript browser object model. It contains multiple common methods and attributes:
1. open a new window
The Code is as follows:
Window. open (pageURL, name, parameters)
Where:
PageURL is the sub-window path
Name is the sub-window handle
Parameters is window parameters (parameters are separated by commas)
For example:
The Code is as follows:
Window. open ("http://www.cnblogs.com/zhouhb/", "open", 'height = 100, width = 400, top = 0, left = 0, toolbar = no, menubar = no, scrollbars = no, resizable = no, location = no, status = no ');
2. Open the mode window.
The Code is as follows:
Window. showModalDialog ("http://www.cnblogs.com/zhouhb/", "open", "toolbars = 0; width = 200; height = 200 ");
3. Close the window. No prompt box is displayed.
If the webpage is not opened through a script program (window. open (), call window. before closing the window, you must close the window. the opener object is set to null. Otherwise, the browser (IE7 and IE8) will pop up a confirmation and close dialog box.
The Code is as follows:
<Script language = "javaScript">
Function closeWindow ()
{
Window. opener = null;
Window. open ('', '_ self ','');
Window. close ();
}
</Script>
<Input type = 'button 'value = 'close window' onClick = "closeWindow ()">
Or
<Input type = "button" value = "Close window" onClick = "window. opener = null;
Window. open ('', '_ self',''); window. close () ">
For closing the frame window
The Code is as follows:
<Script language = "javaScript">
Function closeWindow ()
{
Window. opener = null;
Window. open ('', '_ top ','');
Window. parent. close ();
}
</Script>
4. Use the location object
The Code is as follows:
Window. location. reload (); // refresh the current page
Window. location. href = "http://www.cnblogs.com/zhouhb/"; // load other pages
5. Use the history Object
The Code is as follows:
Window. history. go (1); // forward
Window. history. go (-1); // return
6. The child form transmits a value to the parent form.
6.1 SIMPLE METHOD
(1) Open the child form in the parent form
The Code is as follows:
Var str = window. showModalDialog ("s.html ");
If (str! = Null)
{
Var v = document. getElementById ("v ");
V. value + = str;
}
(2) subform code
The Code is as follows:
Var v = document. getElementById ("v ");
Window. parent. returnValue = v. value;
Window. close ();
In addition, for the window opened by showModalDialog, you can also pass the value through dialogArguments:
Parent window code:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script type = "text/javascript">
Function opendialog ()
{
Window. showModalDialog ("child.html", window, "win", "resable = false"); // The window object is passed as a parameter here.
}
</Script>
</Head>
<Body>
<Form>
<Input type = "text" id = "name"/>
<Input type = "button" id = "open" value = "open" onclick = "opendialog ()"/>
</Form>
</Body>
</Html>
Subwindow code:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script type = "text/javascript">
Function updateParent ()
{
Var pwin = window. dialogArguments; // obtain the passed parameters in the subwindow.
If (pwin! = Undefined)
{
Pwin.doc ument. getElementById ("name"). value = document. getElementById ("name"). value;
}
}
</Script>
</Head>
<Body>
<Form>
<Input type = "text" id = "name"/>
<Input type = "button" id = "update" value = "update parent window" onclick = "updateParent ()"/>
</Form>
</Body>
</Html>
For the window opened by showModalDialog, you can also pass the value through window. returnValue:
Main Window:
The Code is as follows:
<SCRIPT type = "text/javascript">
Function openWindow (){
Var bankCard = window. showModalDialog ("counter.html", "", "dialogWidth = 400px; dialogHeight = 200px ");
Alert ("your bank card password is" + bankCard + "n ");
}
</SCRIPT>
(2) open window
The Code is as follows:
<HEAD>
<META http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<TITLE> window exercises </TITLE>
<SCRIPT type = "text/javascript" language = "javascript">
Function closeWindow (){
Window. returnValue = document. myform. cardPass. value;
Window. close ();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name = "myform" action = "" method = "post">
Account Information: <BR>
Please properly save your account information to avoid losses <BR>
Account: <INPUT name = "cardNum" type = "text" size = "40"> <BR>
Password: <INPUT name = "cardPass" type = "password" size = "45"> <BR>
<INPUT type = "button" name = "btn" value = "OK" onClick = "closeWindow ()">
</FORM>
</BODY>
6.2 more detailed introduction
As we all know, the window. open () function can be used to open a new window. How can we pass a value to the parent form in the child form? In fact, the reference of the parent form can be obtained through window. opener.
For example, our new window fatherpage.htm:
The Code is as follows:
<Script type = "text/javascript">
Function OpenChildWindow ()
{
Zookeeper open('childpage.htm ');
}
</Script>
<Input type = "text" id = "txtInput"/>
<Input type = "button" value = "OpenChild" onclick = "OpenChildWindow ()"/>
Then, you can use window. opener in childpage.htm to access elements in the parent form:
The Code is as follows:
<Script type = "text/javascript">
Function SetValue ()
{
Extends extends opener.doc ument. getElementById ('txtinput'). value
= Document. getElementById ('txtinput'). value;
Window. close ();
}
</Script>
<Input type = "text" id = "txtInput"/>
<Input type = "button" value = "SetFather" onclick = "SetValue ()"/>
The secret can be changed:
The Code is as follows:
<Script type = "text/javascript">
Function OpenChildWindow ()
{
Var child = zookeeper open('childpage.htm ');
Child.doc ument. getElementById ('txtinput'). value
= Document. getElementById ('txtinput'). value;
}
</Script>
<Input type = "text" id = "txtInput"/>
<Input type = "button" value = "OpenChild" onclick = "OpenChildWindow ()"/>
By judging whether the subform reference is null, we can also control that it can only open one subform:
The Code is as follows:
<Script type = "text/javascript">
Var child
Function OpenChildWindow ()
{
If (! Child)
Child = zookeeper open('childpage.htm ');
Child.doc ument. getElementById ('txtinput'). value
= Document. getElementById ('txtinput'). value;
}
</Script>
<Input type = "text" id = "txtInput"/>
<Input type = "button" value = "OpenChild" onclick = "OpenChildWindow ()"/>
This is not enough. When the child form is closed, the child variable of the parent form must be cleared; otherwise, the child form cannot be re-opened after it is closed:
The Code is as follows:
<Body onunload = "Unload ()">
<Script type = "text/javascript">
Function SetValue ()
{
Extends extends opener.doc ument. getElementById ('txtinput'). value
= Document. getElementById ('txtinput'). value;
Window. close ();
}
Function Unload ()
{
Window. opener. child = null;
}
</Script>
<Input type = "text" id = "txtInput"/>
<Input type = "button" value = "SetFather" onclick = "SetValue ()"/>
</Body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
