JavaScript window.opener的用法

来源：互联网发布：unity3d增强现实编辑：程序博客网时间：2024/05/21 09:43

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，同时为新页面相应元素赋值，注意父页面中文本框的变化。