打开弹出窗口,并在关闭弹出窗口时刷新父页面


Answers:


230

您可以使用“ window.opener ” 访问父窗口,因此,在子窗口中编写如下内容:

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>

我不知道window.opener,谢谢!我总是将调用者窗口放在子项的contentWindow中的变量中。:-/
凯-SE很邪恶

3
如果您不能在子页面上控制JavaScript(例如OAuth流),则需要在@Zuul解决方案中popupWindow.closed使用setIntervallike 进行检查。
jchook '16

34

弹出窗口没有可监听的关闭事件。

另一方面,当窗口关闭时,有一个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); 

请参阅此Fiddle工作示例


1
我不想使用计时器!还有其他想法吗?
ArMaN 2012年

1
有点骇人听闻,但我认为使用计时器将在所有浏览器中都发挥最佳作用。
凯-SE很邪恶

如果弹出窗口在关闭之前有多个页面,这也是最好的解决方案,因为仅在用户离开第一页之后才触发onunload事件。
AntonChanning

14

在您的子页面上,输入以下内容:

<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 2012年

@gengkev,我知道OP希望将事件附加到窗口关闭,但是我相信使用按钮是更好的UI设计。但是,我都包含了两者的代码。请指教。
Ray Cheng

我使用了<body onbeforeunload =“ refreshAndClose();”> <script type =“ text / javascript”>函数refreshAndClose(){window.opener.location.reload(true); } self.close(); </ script>
steve0nz 2013年

3

我用这个:

<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()''>

当窗口关闭时,它会刷新父窗口。


2

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)
凯-SE是邪恶的

2

就我而言,我在父页面的链接按钮上单击打开了一个弹出窗口。在使用关闭子项时刷新父项

window.opener.location.reload();

在子窗口中导致重新打开子窗口(可能是因为我猜是View状态。如果我错了,请纠正我)。因此,我决定不重新加载父页面,并再次为其分配相同的URL来加载页面。

为了避免在关闭弹出窗口后再次打开弹出窗口,这可能会有所帮助,

window.onunload = function(){
    window.opener.location = window.opener.location;};

1

如果您的应用程序在启用HTML5的浏览器上运行。您可以使用postMessage。此处给出的示例与您的示例非常相似。


“否则,您将无法在不同的窗口之间进行通信。” 是错的。这项技术仍然可行,尽管我会推荐@Moses的答案
gengkev

-1已删除。如果您举一个小例子,您甚至会得到+1 ;-)
凯-SE是邪恶的

没关系。但是我不认为window.opener对于IE来说还可以。我试试看。
克里斯·李

1
@kay,在IE7 8中效果很好。非常好,我以前不知道。摩西+1。
克里斯·李

1
@ArMaN:jsfiddle.net/8c2e4/10,使用window.opener。您可以使用它来测试您的环境。
克里斯·李

1

试试这个

        self.opener.location.reload(); 

打开当前窗口的父窗口,然后重新加载位置。


0

您可以在步骤完成后使用父命令(主页是窗口)访问主页。

    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 + "");
    } 

0

您可以在父页面中使用以下代码。

<script>
    window.onunload = refreshParent;
    function refreshParent() {
      window.opener.location.reload();
    }
</script>

0

以下代码将设法刷新父窗口的关闭信息:

function ManageQB_PopUp() {
            $(document).ready(function () {
                window.close();
            });
            window.onunload = function () {
                var win = window.opener;
                if (!win.closed) {
                    window.opener.location.reload();
                }
            };
        }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.