当弹出窗口关闭时，我将如何引发事件（jQuery 或 vanilla Javascript）？

Posted 2023-05-08

【中文标题】当弹出窗口关闭时，我将如何引发事件（jQuery 或 vanilla Javascript）？

【英文标题】：How would I raise an event (jQuery or vanilla Javascript) when a popup window is closed?

【发布时间】：2010-09-13 11:58:06

【问题描述】：

我想在弹出窗口关闭时引发事件，或者最好在关闭之前引发事件。我将弹出窗口对象存储为一个对象，但我不知道有什么方法可以绑定到关闭事件或窗口关闭之前的事件。

var popupWindow = window.open("/popup.aspx", "popupWindow", "height=550,width=780");

有什么方法可以使用 jQuery 订阅 close 事件，或者只是原始的 javascript？我正在使用 jQuery 并且不能添加另一个库，所以如果不能在 jQuery 中完成，我将不得不以某种方式滚动我自己的事件系统，以便它可以在所有浏览器上工作。

更新： 我尝试在 jQuery 中使用 unload 事件，由于某种原因，当我的弹出窗口打开而不是关闭时，该事件就会引发。如果我使用 Firebug 设置断点来延迟订阅 unload 事件，则 unload 事件按预期方式工作，但无论出于何种原因，当允许 javascript 自然执行时，它就无法正常工作。

var popupWindow = window.open("/popup.aspx", "popupWindow", "height=550,width=780");
$(popupWindow.window).unload(function()  alert('hello'); );

有人知道为什么在加载窗口时会引发卸载事件吗？

另一个问题是，我注意到 jQuery 的“卸载”事件不会像我通常那样订阅窗口：

popupWindow.onunload = function()alert('hello');

似乎每次引发事件时都会取消订阅。这应该发生吗？如果不是因为 jQuery 中的这个错误（或功能？），那么在加载时引发事件就很好了，因为我可以检查事件内部的 popupWindow.closed 属性以确保窗口真的关闭了。

【参考方案1】：

我创建了一个观察者来检查窗口是否已经关闭：

var w = window.open("http://www.google.com", "_blank", 'top=442,width=480,height=460,resizable=yes', true);
var watchClose = setInterval(function() 
    if (w.closed) 
     clearTimeout(watchClose);
     //Do something here...
    
 , 200);

【参考方案2】：

我尝试了观察者方法，但在 IE6 中使用它时遇到了“权限被拒绝”问题。发生这种情况是因为在关闭窗口的事件周围无法完全访问关闭的属性......但幸运的是，通过 try catch 构造它可以工作：o）

var w = window.open("http://www.google.com", "_blank", 'top=442,width=480,height=460,resizable=yes', true);

var watchClose = setInterval(function() 
    try 
        if (w.closed) 
            clearTimeout(watchClose);
            //Do something here...
        
     catch (e) 
, 200);

谢谢马格纳斯

【参考方案3】：

我想我知道发生了什么：

当您使用window.open 时，它会打开一个位置为“about:blank”的新窗口，然后将其更改为您在函数调用时提供的 url。

因此，unload 事件在从“about:blank”更改为正确的 url 之前绑定，并在更改发生时触发。

我得到它与 JQuery 一起工作：

$(function()
    var win = window.open('http://url-at-same-domain.com','Test', 'width=600,height=500');
    $(win).unload(function()
        if(this.location == 'about:blank')
        
            $(this).unload(function()
                // do something here
            );
        
    );
);

【参考方案4】：

卸载事件的jQuery代码示例

$(window).unload( function () alert("Bye now!"); );

来自jQuery unload documentation

编辑：

我到处玩，无法让父窗口能够设置卸载。我可以让它工作的唯一方法是让脚本出现在弹出窗口 html 中。弹出窗口还需要加载 jQuery。我没有任何依据，但我相信卸载正在被触发，因为基本上弹出窗口正在从父窗口的范围内卸载。只是猜测。

【参考方案5】：

您必须让 onBeforeUnload 事件调用一个方法来通知您的处理程序。

查看此页面查看演示。

http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm

【参考方案6】：

使用window.onUnload

【参考方案7】：

根据我之前的经验，我必须提到与之前提到的 onunload 相关的一个小问题：

Opera 9.0.x-9.2.x 仅在用户离开页面时运行 window.onUnload。如果用户关闭窗口，则该事件将永远不会触发。我怀疑这样做是为了解决自动重新加载弹出窗口问题（弹出窗口可以在页面关闭时重新打开）。

这很可能持续到 Opera 9.5.x。其他浏览器也可能实现这一点，但我不相信 IE 或 Firefox 会这样做。

【参考方案8】：

从我检查的结果来看，jQuery unload 只是本机函数的一个包装器。我可能是错的，因为我没有挖得那么深。

这个例子对我有用。

$(document).ready(function()
    $(window).unload( function ()
        alert('preget');
        $.get(
            '/some.php',
             request: 'some' 
        );
        alert('postget');
    );
);

记住一些browsers block the window.open requests on unload, IE for example。