JavaScript-window object usage example

Author：Eve Cole Update Time：2025-01-18 13:36:02

The window object is the top-level object in the JavaScript browser object model and contains multiple common methods and properties:

1 Open new window

Copy the code code as follows:

window.open(pageURL,name,parameters)

in:

pageURL is the path of the child window

name is the child window handle

Parameters are window parameters (each parameter is separated by commas)

like:

Copy the code code 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 modal window

Copy the code code as follows:

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

3 Close the window without popping up the prompt box

If the web page is not opened through a script program (window.open()), before calling the window.close() script to close the window, the window.opener object must be set to null, otherwise the browser (IE7, IE8) will pop up an OK Close the dialog box.

Copy the code code as follows:

function closeWindow()

{

window.opener = null;

window.open('', '_self', '');

window.close();

}

</script>

<input type="button" value="Close window" onClick="window.opener = null;

window.open('', '_self', '');window.close()">

For closing frame window

Copy the code code as follows:

function closeWindow()

{

window.opener = null;

window.open('', '_top', '');

window.parent.close();

}

</script>

4 location object usage

Copy the code code as follows:

window.location.reload();//Refresh the current page

window.location.href="http://www.cnblogs.com/zhouhb/"; //Load other pages

5 Use of history object

Copy the code code as follows:

window.history.go(1); //Forward

window.history.go(-1); //Back

6 The child form passes values to the parent form

6.1 Simple method

(1) Open the subform in the parent form

Copy the code code as follows:

var str=window.showModalDialog("s.html");

if(str!=null)

{

var v=document.getElementById("v");

v.value+=str;

}

(2) Subform code

Copy the code code 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 values through dialogArguments:

Parent window code:

Copy the code code as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

function opendialog()

{

window.showModalDialog("child.html",window,"win","resable=false");//Here the window object is passed as a parameter

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Subwindow code:

Copy the code code as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

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>

</form>

</body>

</html>

For the window opened by showModalDialog, you can also pass the value through window.returnValue:

Main window:

Copy the code code as follows:

function openWindow(){

var bankCard=window.showModalDialog("counter.html","","dialogWidth=400px;dialogHeight=200px");

alert("Your bank card password is "+bankCard+"/n");

}

</SCRIPT>

(2) Open window

Copy the code code as follows:

<HEAD>

<TITLE>Window exercises</TITLE>

function closeWindow(){

window.returnValue=document.myform.cardPass.value;

window.close();

}

</SCRIPT>

</HEAD>

<BODY>

Account information:<BR>

Please keep your account information properly to avoid losses<BR>

Account number: <INPUT name="cardNum" type="text" size="40"><BR>

Password: <INPUT name="cardPass" type="password" size="45"><BR>

</FORM>

</BODY>

6.2 A more detailed introduction

As we all know, the window.open() function can be used to open a new window, so how to pass the value to the parent form in the child form? In fact, you can get the reference of the parent form through window.opener.

For example, if we create a new form FatherPage.htm:

Copy the code code as follows:

function OpenChildWindow()

{

window.open('ChildPage.htm');

}

</script>

Then in ChildPage.htm, you can access the elements in the parent form through window.opener:

Copy the code code as follows:

function SetValue()

{

window.opener.document.getElementById('txtInput').value

=document.getElementById('txtInput').value;

window.close();

}

</script>

In fact, while opening the subform, we can also assign values to the elements of the subform, because the window.open function will also return a reference to the subform, so FatherPage.htm can be modified as:

Copy the code code as follows:

function OpenChildWindow()

{

var child = window.open('ChildPage.htm');

child.document.getElementById('txtInput').value

=document.getElementById('txtInput').value;

}

</script>

By determining whether the reference of the subform is empty, we can also control it to open only one subform:

Copy the code code as follows:

var child

functionOpenChildWindow()

{

if(!child)

child = window.open('ChildPage.htm');

child.document.getElementById('txtInput').value

=document.getElementById('txtInput').value;

}

</script>

This alone is not enough. When the child form is closed, the child variable of the parent form must also be cleared. Otherwise, the child form cannot be reopened after it is opened and then closed:

Copy the code code as follows:

function SetValue()

{

window.opener.document.getElementById('txtInput').value

=document.getElementById('txtInput').value;

window.close();

}

functionUnload()

{

window.opener.child=null;

}

</script>

</body>