window.opener在弹出窗口中将引用window
打开窗口的对象,所以当然你应该能够调用window.opener.location.reload();
。只要你不触犯同源政策,弹出窗口可以调用脚本并操作父窗口对象上的属性,就像父窗口中的代码一样。
这是一个活生生的例子演示子级回调父级上的函数,并直接操作父级。下面引用了完整的代码。
但那个例子没有做到exactly你说的,所以我已经也做了这个,让孩子通过以下方式刷新父页面window.opener.location.reload()
.
第一个实例的父代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Parent Window</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='button' id='btnOpen' value='Open Window'>
<div id='display'></div>
</body>
<script type='text/javascript'>
(function() {
var btnOpen = document.getElementById('btnOpen');
btnOpen.onclick = btnOpenClick;
function btnOpenClick() {
window.open('http://jsbin.com/ehupo4/2');
}
// Make the callback function available on our
// `window` object. I'm doing this explicitly
// here because I prefer to export any globals
// I'm going to create explicitly, but if you
// just declare a function in a script block
// and *not* inside another function, that will
// automatically become a property of `window`
window.callback = childCallback;
function childCallback() {
document.getElementById('display').innerHTML =
'Got callback from child window at ' + new Date();
}
})();
</script>
</html>
(你不have像我上面那样使用作用域函数,但保留全局变量很有用。)
第一个实例的子代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Child Window</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<p>I'm the child window</p>
</body>
<script type='text/javascript'>
if (window.opener) {
// Call the provided callback
window.opener.callback();
// Do something directly
var p = window.opener.document.createElement('p');
p.innerHTML = "I was added by the child directly.";
window.opener.document.body.appendChild(p);
}
</script>
</html>