异步通信跨页面

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

您可以return自定义承诺并在需要时按以下代码解决它

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

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

异步通信跨页面

Asynchronous communication cross pages

javascript

asynchronous

postmessage

cross-domain

angular-ui-router