打开弹出窗口并在关闭弹出窗口时刷新父页面
Posted
技术标签:
【中文标题】打开弹出窗口并在关闭弹出窗口时刷新父页面【英文标题】：Open popup and refresh parent page on close popup 【发布时间】：2012-06-03 06:41:29 【问题描述】：我在 javascript 中通过 window.open 打开了一个弹出窗口，我想在关闭此弹出窗口时刷新父页面。（onclose 事件？）我该怎么做？
window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
【问题讨论】：
请检查：***.com/questions/18321323/… 可能会帮助某人 【参考方案1】：您可以使用'window.opener'访问父窗口，因此，在子窗口中编写如下内容：
<script>
window.onunload = refreshParent;
function refreshParent()
window.opener.location.reload();
</script>
【讨论】：
我不知道window.opener，谢谢！我总是将调用者窗口放在孩子的 contentWindow 中的一个变量中。 :-/ 如果您不控制子页面上的 JavaScript（例如 OAuth 流程），那么您需要使用 @Zuul 的解决方案中的setInterval 检查 popupWindow.closed。【参考方案2】：
弹窗没有任何可以收听的关闭事件。
另一方面，当窗口关闭时，有一个 closed 属性设置为 true。
您可以设置一个计时器来检查该关闭的属性，并这样做：
var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");
var timer = setInterval(function()
if(win.closed)
clearInterval(timer);
alert('closed');
, 1000);
看到这个working Fiddle example！
【讨论】：
我不想使用计时器！还有其他想法吗？ 有点骇人听闻，但我认为使用计时器在所有浏览器中效果最好。 如果弹出窗口在关闭前有多个页面，这也是最好的解决方案，因为只有在用户离开第一页后才会触发 onunload 事件。【参考方案3】：在您的子页面上，放置这些：
<script type="text/javascript">
function refreshAndClose()
window.opener.location.reload(true);
window.close();
</script>
和
<body onbeforeunload="refreshAndClose();">
但作为一个好的 UI 设计，您应该使用 Close button，因为它对用户更友好。请参阅下面的代码。
<script type="text/javascript">
$(document).ready(function ()
$('#btn').click(function ()
window.opener.location.reload(true);
window.close();
);
);
</script>
<input type='button' id='btn' value='Close' />
【讨论】：
弹窗关闭时，不是用户点击按钮刷新页面关闭弹窗时 @gengkev，我知道 OP 想将事件附加到窗口关闭，但我相信使用按钮是更好的 UI 设计。但是，我包含了两者的代码。请指教。 我使用了 【参考方案4】：我用这个：
<script language='javascript'>
var t;
function doLoad()
t = setTimeout("window.close()",1000);
</script>
<script type="text/javascript">
function refreshAndClose()
window.opener.location.reload(true);
window.close();
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>
当窗口关闭时，它会刷新父窗口。
【讨论】：
【参考方案5】：window.open 将返回对新创建窗口的引用，前提是打开的 URL 符合 Same Origin Policy。
这应该可行：
function windowClose()
window.location.reload();
var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;
【讨论】：
如果用户能够在打开的窗口中点击链接，则该功能将不起作用。而且我很确定在首次加载目标 URL 之前会引发卸载事件，因为您隐含地离开 about:blank。 （+1 提及 SOP）【参考方案6】：在我的例子中，我在点击父页面中的链接按钮时打开了一个弹出窗口。 使用
在关闭子项时刷新父项window.opener.location.reload();
在子窗口中导致重新打开子窗口（我猜可能是因为视图状态。如果我错了，请纠正我）。 所以我决定不在父页面重新加载页面并再次加载页面并为其分配相同的网址。
为了避免在关闭弹出窗口后再次打开弹出窗口，这可能会有所帮助，
window.onunload = function()
window.opener.location = window.opener.location;;
【讨论】：
【参考方案7】：如果您的应用在支持 HTML5 的浏览器上运行。您可以使用postMessage。那里给出的例子与你的非常相似。
【讨论】：
"否则，您将无法跨不同窗口进行通信。"是错的。该技术仍然可行，尽管我推荐@Moses 的答案 -1 已删除。如果你举一个小例子，你甚至会得到 +1 ;-) 没关系。但我不认为 window.opener 适合 IE。我试试看。 @kay，在 IE7、8 中运行良好。非常好，我以前不知道。为摩西 +1。 @ArMaN:jsfiddle.net/8c2e4/10，使用 window.opener。您可以使用它来测试您的环境。【参考方案8】：试试这个
self.opener.location.reload();
打开当前窗口的父窗口并重新加载位置。
【讨论】：
【参考方案9】：在这一步之后，你可以使用父命令（父是窗口）进入主页面，你可以制作一切......
function funcx()
var result = confirm('bla bla bla.!');
if(result)
//parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
【讨论】：
【参考方案10】：您可以在父页面中使用以下代码。
<script>
window.onunload = refreshParent;
function refreshParent()
window.opener.location.reload();
</script>
【讨论】：
【参考方案11】：以下代码将设法在关闭后刷新父窗口：
function ManageQB_PopUp()
$(document).ready(function ()
window.close();
);
window.onunload = function ()
var win = window.opener;
if (!win.closed)
window.opener.location.reload();
;
【讨论】：
以上是关于打开弹出窗口并在关闭弹出窗口时刷新父页面的主要内容，如果未能解决你的问题，请参考以下文章