JavaScript window.opener的用法

最新推荐文章于 2025-05-13 11:45:00 发布

你猜猜看！

最新推荐文章于 2025-05-13 11:45:00 发布

阅读量4.3k

点赞数

分类专栏： javascript 文章标签： javascript button function

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何利用window.opener在子窗口中操作打开它的父窗口，包括刷新父窗口、给父窗口元素赋值及关闭父窗口等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.opener主要用于通过子页面操纵打开子页面的父页面。通过这种方法，子页面可以象操纵本页面一样操纵父页面。

通过Windows.opener可以获取父页面对象，接下来就可以象操纵本页面一样操纵父页面。这里重点列出几个特殊的方法：

window.opener.location.reload()：该方法可以在子页面中刷新父页面。

window.opener.close()：该方法在子页面中关闭父页面。

window.opener.document.operator：该方法就是子页面操纵父页面的方法，其中operator就是和本页面一样的具体操纵。Eg:

window.opener.document.getElementById('testValue').value='111111' //在子页面中给id为testValue的元素赋值。

具体举例如下：

父页面opner.html

<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=gb2312" >
<title>opner</title>
<mce:script type="text/javascript" ><!--
function tetsVlaue(){
document.getElementById('childTest' ).document.getElement( 'refreshParent' ).value= "111111" ;
}
// --></mce:script>
</head>
<body>
<input type="button" value= "open" onclick= "window.open('child.html','childTest')" />
<br>
<input type="text" id= "testValue" name= "testValue" value= "123" readonly />
<br>
<input type="button" value= "testChild" onclick= "testChild()" >
</body>
</html>
子页面child.html
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=gb2312" >
<title>childTest</title>
</head>
<body>
<mce:script type="text/javascript" ><!--
function refreshParent(){
window.opener.location.reload();
window.opener.document.getElementById('testValue' ).value= '111111' ;
}
function closeparent(){
window.opener.close();
}
// --></mce:script>
<input type="button" id= "refreshParent" value= "refreshParent" onclick= "refreshParent()" >
<br>
<input type="button" value= "closeparent" onclick= "closeparent()" >
</body>
</html>

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>opner</title> <mce:script type="text/javascript"></mce:script> </head> <body> <input type="button" value="open" onclick="window.open('child.html','childTest')" /> <br> <input type="text" id="testValue" name="testValue" value="123" readonly /> <br> <input type="button" value="testChild" onclick="testChild()"> </body> </html> 子页面child.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>childTest</title> </head> <body> <mce:script type="text/javascript"></mce:script> <input type="button" id="refreshParent" value="refreshParent" onclick="refreshParent()"> <br> <input type="button" value="closeparent" onclick="closeparent()"> </body> </html>

该例实现在子页面child.html中关闭，从新加载父页面opener.html，同时为新页面相应元素赋值，注意父页面中文本框的变化。