Of Stack

JavaScript the window object is used as an example

  • 2020-03-30 00:46:06
  • OfStack
The window object is the top-level object in the JavaScript browser object model, and contains several common methods and properties:

1 open a new window 
 
window.open(pageURL,name,parameters)

Among them:

PageURL is the path of the child window

Name is the handle to the child window

Parameters are window parameters (separated by commas)

Such as: 
 
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');

Open the mode window 
 
window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");

Close the window and no prompt box will pop up

If the page is not opened by a script (window.open()), you must set the window.opener object to null before calling the window.close() script to close the window. 
 
<script language="javaScript"> 
function closeWindow() 
{ 
　window.opener = null; 
　window.open('', '_self', ''); 
　window.close(); 
} 
</script> 
<input type='button' value=' Close the window ' onClick="closeWindow()"> 
 or  
<input type="button" value=" Close the window " onClick="window.opener = null; 
window.open('', '_self', '');window.close()">

For closing the frame window 
 
<script language="javaScript"> 
function closeWindow() 
{ 
window.opener = null; 
window.open('', '_top', ''); 
window.parent.close(); 
} 
</script>

4 the location object is used 
 
window.location.reload();//Refresh the current page
window.location.href="http://www.cnblogs.com/zhouhb/"; //Load other pages

5 use of the history object 
 
window.history.go(1); // forward  
window.history.go(-1); // back

The child form passes values to the parent form

6.1 simple methods

(1) open the child form in the parent form 
 
var str=window.showModalDialog("s.html"); 
if(str!=null) 
{ 
var v=document.getElementById("v"); 
v.value+=str; 
}

(2) subform code 
 
var v=document.getElementById("v"); 
window.parent.returnValue=v.value; 

window.close();

Additionally, for Windows open by showModalDialog, you can also transfer values via dialogArguments:

Parent window code: 
 
<!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> Headless document </title> 
<script type="text/javascript"> 
function opendialog() 
{ 
window.showModalDialog("child.html",window,"win","resable=false");//The window object is passed as an argument
} 
</script> 
</head> 

<body> 
<form> 
<input type="text" id="name" /> 
<input type="button" id="open" value="open" onclick="opendialog()"/> 
</form> 
</body> 
</html>

Child window code: 
 
<!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> Headless document </title> 
<script type="text/javascript"> 
function updateParent() 
{ 
var pwin=window.dialogArguments;//The child window gets the passed parameters
if(pwin!=undefined) 
{ 
pwin.document.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 Windows opened by showModalDialog, values can also be passed through window.returnvalue:

The main window: 
 
<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 
 
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<TITLE> Window to practice </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 keep your account information in case of loss <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=" confirm " onClick="closeWindow()"> 
</FORM> 
</BODY>

6.2 more detailed introduction

The window.open() function is known to open a new window, so how do you pass a value to the parent form in a child form? You can get a reference to the parent form from window.opener.
Fatherpage.htm: 
 
<script type="text/javascript"> 
function OpenChildWindow() 
{ 
window.open('ChildPage.htm'); 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

Then in childpage.htm you can access the elements in the parent form by window.opener: 
 
<script type="text/javascript"> 
function SetValue() 
{ 
window.opener.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
window.close(); 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="SetFather" onclick="SetValue()" />

Because the window.open function also returns a reference to the child form, fatherpage.htm can be changed to: 
 
<script type="text/javascript"> 
function OpenChildWindow() 
{ 
var child = window.open('ChildPage.htm'); 
child.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

We can also control the child form to open only one child form by determining whether the child form's reference is empty: 
 
<script type="text/javascript"> 
var child 
function OpenChildWindow() 
{ 
if(!child) 
child = window.open('ChildPage.htm'); 
child.document.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, if the child form is opened and closed again, it cannot be reopened: 
 
<body onunload="Unload()"> 
<script type="text/javascript"> 
function SetValue() 
{ 
window.opener.document.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>
Related articles: