异步通信跨页面

Question

我有一个页面addin.html。它可以通过

弹出另一个页面editor（不一定在同一个域中）

popup = window.open("https://localhost:3000/#/posts/editor/", "popup")

那么，两个页面每个内部都有一个监听器，可以通过

相互发送数据

// listen:
function receiveMessage(event) {
    document.getElementById("display").innerHTML = JSON.stringify(event.data);
}
window.addEventListener("message", receiveMessage, false);

// send:
function sendMessage() {
    popup.postMessage("data", popup.location.href);
}

editor 由ui-router 实现。最初，它在加载页面之前解析init：

.state('editor', {
    controller: 'EditorCtrl',
    resolve: { init: [ ... ] },
    ...
};

app.controller('EditorCtrl', ['$scope', 'init', function ($scope, init) {
    ...
}]

我现在要实现的是，当addin.html弹出editor时，它会向editor发送一些数据，而init需要在加载页面之前解析这些数据。 editor 在接收到来自addin.html 的数据之前可能会挂起。

有谁知道如何修改接收者和发送者（以及其他东西）来完成这个？

Answer 1

你可以返回一个自定义的 Promise 并在任何时候像下面的代码那样解决它

.state('editor', {
  controller: 'EditorCtrl',
  resolve:{
    init: function($q){
         var deferred = $q.defer();
         window.addEventListener("message", function(event){
              deferred.resolve(event.data);
         }, false);
         return deferred.promise;
     }
  }
});

控制器在实例化之前等待上述项目完全解决。