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

它的作用:它使用提供的参数创建新窗口,然后以1s间隔设置检查器功能.然后,该函数检查窗口对象是否存在并将其closed属性设置为false.如果其中任何一个不成立,这意味着窗口(可能)已关闭,我们应该触发'closeCallback函数'回调.

此功能适用于所有现代浏览器.前一段时间,Opera在从其他域上的窗口检查属性时导致错误 - 因此try..catch块.但我现在已经测试了它,看起来它的确很好用.

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

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