当打开的弹出窗口的位置发生变化时得到通知

Question

我正在我的网站上实施外部 OAuth 身份验证。 单击按钮时，我将打开弹出窗口，其中包含我们的 facebook 身份验证页面。 现在我需要知道身份验证何时完成以读取 OAuth 令牌并关闭弹出窗口。

click: function () {
   var popup = window.open(url, title, '<options>');
   popup.onload = function () {
       //1. if url contains token - finish OAuth authentication
       //2. close popup

       //but 'onload' doesn't work for external domains
   }
   return false;
},

当我尝试使用轮询技术进行访问时，我遇到了以下安全错误：

Uncaught SecurityError: Blocked a frame with origin “https://some_app_host_not_the_same_as_following.com”来自访问具有原点的框架 “https://some_auth_host_which_works_with_facebook.com”。协议、域、 和端口必须匹配。

我怎样才能做到这一点？

Answer 1

如果您可以控制弹出窗口的内容，则在此处处理窗口的卸载事件并通过 opener 属性通知原始窗口，首先检查打开器是否已关闭。请注意，这在 Opera 中并不总是有效。

window.onunload = function() {
    var win = window.opener;
    if (win.closed) {
        win.someFunctionToCallWhenPopUpCloses();
    }
};

因为每当用户离开弹出窗口中的页面时都会触发 unload 事件，而不仅仅是在关闭窗口时，您应该在 someFunctionToCallWhenPopUpCloses 中检查弹出窗口是否实际关闭：

var popUp = window.open("popup.html", "thePopUp", "");
function someFunctionToCallWhenPopUpCloses() {
    window.setTimeout(function() {
        if (popUp.closed) {
            alert("Pop-up definitely closed");
        }
    }, 1);
}

如果您无法控制弹出窗口的内容，或者您​​的目标浏览器之一不支持 unload 事件，那么您只能在主窗口中使用某种轮询解决方案。调整间隔以适应。

var win = window.open("popup.html", "thePopUp", "");
var pollTimer = window.setInterval(function() {
    if (win.closed !== false) { // !== is required for compatibility with Opera
        window.clearInterval(pollTimer);
        someFunctionToCallWhenPopUpCloses();
    }
}, 200);