Javascript 检测关闭加载了另一个域的弹出窗口

Question

我正在打开一个弹出窗口并将 onbeforeunload 事件附加到它，如下所示:

win = window.open("http://www.google.com", "", "width=300px,height=300px");
win.onbeforeunload = function() {
    //do your stuff here
    alert("Closed");
};

如果我将 URL 留空，新的弹出窗口将打开，地址为“about:blank”，但当我关闭它时，我会看到警报。

如果我按照您所看到的方式打开它(使用外部 URL)，那么一旦关闭，我就无法再看到警报。知道为什么会发生这种情况吗？

Answer 1

如上所述，同源策略会阻止 Javascript 检测此类事件。但是有一个非常简单的解决方案可以让您检测此类窗口的关闭。

JS代码如下:

var openDialog = function(uri, name, options, closeCallback) {
    var win = window.open(uri, name, options);
    var interval = window.setInterval(function() {
        try {
            if (win == null || win.closed) {
                window.clearInterval(interval);
                closeCallback(win);
            }
        }
        catch (e) {
        }
    }, 1000);
    return win;
};

它的作用:它使用提供的参数创建新窗口，然后以 1 秒的间隔设置检查器功能。然后该函数检查窗口对象是否存在以及其 close 属性是否设置为 false。如果其中任何一个不为真，则意味着窗口(可能)已关闭，我们应该触发“closeCallback 函数”回调。

此功能应该适用于所有现代浏览器。不久前，Opera 在检查其他域上的窗口属性时引发了错误 - 因此出现了 try..catch block 。但我现在已经测试过了，看起来效果还不错。

我们使用这种技术为不通过 SDK 支持的网站创建“facebook 风格”登录弹出窗口(呃……Twitter……呃呃)。这需要一些额外的工作 - 我们无法从 Twitter 本身获取任何消息，但 Oauth 将我们重定向回我们的域，然后我们能够将一些数据放入可从 opener 访问的弹出窗口对象中。然后在关闭回调函数中我们解析这些数据并呈现实际结果。

此方法的一个缺点是在窗口关闭后调用回调。嗯，这是我通过实现跨域策略所能实现的最好结果。