javascript - 跨页面异步通信

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

Controller 在实例化之前等待上述项目完全解析。