【问题标题】:Share variable between two windows. Angularjs在两个窗口之间共享变量。 Angularjs
【发布时间】:2019-01-30 18:59:17
【问题描述】:

从我的 angularjs 应用程序中打开一个新窗口:

 $window.open($state.href('catalog-detalleTicketMapa', {
      id: $localStorage.idRamdom
    }), 'window', 'height=700,width=700');

当我关闭该新窗口时,我希望父窗口知道该事件,然后执行以下操作

// controller auxiliary window
vm.onExit = function () {
  $rootScope.$broadcast('ventanaCerrada');
};

$window.onbeforeunload = vm.onExit;

// controller main windows
$scope.$on('ventanaCerrada', function () {
  $rootScope.ventanaAbierta = false;
});

如果进入事件$rootScope.$broadcast但未进入事件范围.$on.

我也用localStorage测试过,只是在辅助窗口更新,主窗口没有。

如何在浏览器中同时在两个打开的窗口之间共享一个变量?

【问题讨论】:

  • $broadcast 发射到所有子作用域,我认为另一个窗口不是子作用域,您可能需要使用其他方法
  • 也许this answer对你有用

标签: angularjs


【解决方案1】:

当您使用$window.open 打开一个新窗口时,它不会与调用窗口共享范围,因此不可能(afaik)在它们之间用角度广播任何内容。但是调用窗口可以在打开的窗口中访问全局变量,所以我使用类似于观察者的东西来观察那个变量。

我在WindowService中有如下代码打开新窗口(我们只打开单个窗口;如果需要更多,需要调整代码):

angular.module('myproject')
.service('WindowService', ['$window', '$interval', '$timeout', 
function ($window, $interval, $timeout) {

    var self = this;
    this.myOpenWindow = null;

    // opens a window and starts the wait-function
    this.openWindow = function (url, callbackFn) {
        // open the window
        self.myOpenWindow = $window.open(url);

        // Puts focus on the new window
        if (window.focus) {
            self.myOpenWindow.focus();
        }

        // check for response in opened window
        self.waitForResponse(callbackFn);
    };

    this.waitStarted = false;

    this.waitForResponse = function (callbackFn) {
        if (!self.waitStarted && self.myOpenWindow) {
            self.waitStarted = true;
            var intervalPeriod = 1000; // check once every second
            var waitHandler;
            waitHandler = $interval(function (index) {
                if (self.myOpenWindow.closed) {
                    // window was closed, commence cleaning operation
                    $interval.cancel(waitHandler);
                    waitHandler = $timeout(function () {
                        // re-initialize waitStarted so it can be used again
                        self.waitStarted = false;
                        // call callback-Function when the window is closed
                        if (callbackFn) {
                            callbackFn();
                        }
                    }, intervalPeriod);

                } else {
                    // window is still open, check if the observed variable is set 
                    if (self.myOpenWindow && self.myOpenWindow.response_message) {
                        var message = self.myOpenWindow.response_message;
                        // do what you want with the message
                        // ...
                        // afterwards close the window (or whatever)
                        if (self.myOpenWindow) {
                            self.myOpenWindow.close();
                        }
                    }
                }
            }, intervalPeriod);
        }
    };
}
]);

在打开的窗口中,您需要在某处设置该全局变量,例如像这样:

window['response_message'] = { 'result': 'Done' };

【讨论】:

  • 完美,正是我想要的,就是我只能打开一个窗口。
【解决方案2】:

通常您不能在两个窗口之间共享存储数据。如果您确实需要将一个窗口中的数据更改反映在另一个窗口中,请使用 socket 或 firebase 获取实时数据。

【讨论】: