Question

我在遗留应用程序中嵌入了iframe。在iframe内部，我需要做oauth（我将捕获身份验证令牌供以后使用）。为了从iframe中执行oauth，我需要使用弹出窗口。我需要的是，当oauth完成时，该弹出窗口会与iframe进行通信，以便iframe中的页面可以刷新其数据。我需要支持IE 10 +，Chrome和Firefox，我尝试过的所有内容在Chrome / Firefox中运行良好但在IE中失败。我目前的解决方案（几乎可以工作）看起来像这样：

/** From within the iframe **/
var storageName = 'SoProOauth';
var addAccountDeferred;
$window.addEventListener('storage', function (evt) {
    if (evt.key == storageName) {
        localStorage.removeItem(storageName);
        getAccounts().then(function () {
            addAccountDeferred.resolve();
        });
    }
});

// ... later ...
addAccount: function (type) {
    addAccountDeferred = $q.defer();
    var uri = util.format('/oauth/%s/connect?auth=%s&return_uri=%s',
              type, configuration.get('auth'), encodeURI('/configure/oauthcomplete'));

    if (Boolean(configuration.get('debug'))) {
        uri += '&debug=true';
    }

    localStorage.removeItem(storageName);
    var oauthWindow = $window.open(uri, 'oauth', 'width=800,height=600');
    if (oauthWindow && oauthWindow.focus) oauthWindow.focus();

    return addAccountDeferred.promise;
}

/** From within the popup **/
localStorage.setItem('SoProOauth', 'done');
$timeout(function () {
    setInfo('This window can be closed');
    $window.open('', '_self', '');
    $window.close();
}, 500);

基本上，我是从弹出窗口中写入本地存储，并在父窗口中侦听写入事件。这个几乎有效 - 它在我的本地测试环境中运行良好，但在将其部署到开发集群时失败。它失败可能有两个原因：1）当我在本地运行时，一切都是通过HTTP，但在开发群集中它是通过HTTPS（更糟糕的是，托管iframe的页面是HTTP但iframe内容是HTTPS），或者2 ）当我在本地运行时，一切都是localhost，但在开发群集中，iframe主机是一台机器（本地Intranet），iframe的内容是公共互联网（AWS）。

我尝试过的其他事情：cookies（相同的结果 - 在本地工作但未部署），以及所有窗口属性（window.opener，window.parent和测试window.closed（）来自iframe） - 这些不能在IE中工作，因为一旦域名发生变化，事情就会重置（这是因为我们正在做oauth）。

正如您所看到的，UI代码是AngularJS，但您无法看到它是由Node.js托管的。所以我考虑使用像socket.io这样的东西，但它看起来很重 - 我真的只需要从弹出窗口向iframe中的父节点发送一个快速事件。有什么想法吗？

在Internet Explorer中弹出到父窗口通信

0 个答案: