Javascript检测用另一个域加载的关闭弹出窗口 [英] Javascript detect closing popup loaded with another domain

问题描述

我打开一个弹出窗口并将onbeforeunload事件附加到它上面：

I am opening a popup window and attaching an onbeforeunload event to it like this:

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

如果我将URL保留为空，则新弹出窗口将以about：blank作为地址打开但是当我关闭它时，我会看到警报。

If I leave the URL empty, the new popup opens with "about:blank" as the address but when I close it, I see the alert.

如果我看到它（使用外部URL）打开，一旦关闭，我就再也看不到警报了。知道为什么会发生这种情况吗？

If I open in as you see it (with an external URL), once it's closed, I cannot see the alert anymore. Any idea why this is happening?

推荐答案

如上所述，相同的原始策略会阻止Javascript检测此类事件。但是有一个非常简单的解决方案，它允许你检测这些窗口的关闭。

As mentioned, same origin policy prevents Javascript from detecting such events. But there's a quite simple solution which allows you to detect closure of such windows.

这是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;
};

它的作用：它使用提供的参数创建新窗口，然后以1s间隔设置检查器功能。然后，该函数检查窗口对象是否存在并将其closed属性设置为false。如果这些不是真的，这意味着，窗口（可能）已关闭，我们应该触发'closeCallback函数'回调。

What it does: it creates new window with provided parameters and then sets the checker function with 1s interval. The function then checks if the window object is present and has its closed property set to false. If either ot these is not true, this means, that the window is (probably) closed and we should fire the 'closeCallback function' callback.

此函数应该可以使用所有现代浏览器。前一段时间，Opera在从其他域上的窗口检查属性时导致错误 - 因此try..catch块。但是我现在已经测试了它，看起来效果还不错。

This function should work with all modern browsers. Some time ago Opera caused errors when checking properties from windows on other domains - thus the try..catch block. But I've tested it now and it seems it works quite ok.

我们使用这种技术为不支持的网站创建'facebook-style'登录弹出窗口他们通过SDK（嗯......推特......嗯）。这需要一些额外的工作 - 我们无法从Twitter本身获得任何消息，但是Oauth将我们重新引导回我们的域，然后我们能够将一些数据放入弹出窗口对象中，这些数据可以从开启者访问。然后在close回调函数中，我们解析了这些数据并显示了实际结果。

We used this technique to create 'facebook-style' login popups for sites which doesn't support them via SDK (ehem... Twitter... ehem). This required a little bit of extra work - we couldn't get any message from Twitter itself, but the Oauth redireced us back to our domain, and then we were able to put some data in popup window object which were accessible from the opener. Then in the close callback function we parsed those data and presented the actual results.

此方法的一个缺点是在窗口关闭后调用回调。嗯，这是我能够实现跨域政策的最佳方式。

One drawback of this method is that the callback is invoked AFTER the window has been closed. Well, this is the best I was able to achieve with cross domain policies in place.

这篇关于Javascript检测用另一个域加载的关闭弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！