Asynchronous communication cross pages

Question

I have a page addin.html. It can popup another page editor (which is not necessarily in the same domain) by

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

Then, the two pages have each one listener inside, and can send data to each other by

// 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 is realised by ui-router. Initially, it resolves init before loading the page:

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

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

What I want to implement now is, when addin.html popups editor, it sends some data to editor, and init needs to resolve this data, before loading the page. editor could hang before receiving the data from addin.html.

Does anyone know how to amend the receivers and senders (and something else) to accomplish this?

There may be lots of data, how could I embed them in `window.open`? — SoftTimur, Mar 09 '17 at 18:43
There aren't many choices. If data is too big, use server-side sessions to store and retrieve data. Or send data with POST. — Estus Flask, Mar 09 '17 at 18:46
@estus , I don't understand what you propose... unlike `editor`, `addin.html` does not have a server, and is not built with angularjs. — SoftTimur, Mar 09 '17 at 18:50
Why didn't you say anything about what is addin.html if it's important? The page doesn't need its own server to send something there. It just need *some* server. Why should it matter that it isn't built with Angular? It can use JS and thus do the things that I've suggested. — Estus Flask, Mar 09 '17 at 18:55
`addin.html` is important. As the name suggests, it has some limitations: it cannot have its own server, whereas it can have JS code. Could you make an answer with `server-side sessions` and `POST`? — SoftTimur, Mar 09 '17 at 19:18
This will be a duplicate of existing questions, like http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit . As any other popular topic, it was already thoroughly discussed on SO. I can't say anything on server-side sessions, because it solely depends on your server side. Btw, you will need some server-side magic to make POST variables available in Angular app, too. — Estus Flask, Mar 09 '17 at 20:30
you already pass "popup", which isn't that useful. pass your data instead and it's available as `window.name` in the popup. since you assign a var _popup_, you don't even need to pass that name... — dandavis, Mar 14 '17 at 22:04

score 0 · Accepted Answer · edited Mar 15 '17 at 03:53

0

You could return a custom promise and resolve it whenever you want as the following code

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

The controller waits for above item to be completely resolved before instantiation.

edited Mar 15 '17 at 03:53

SoftTimur

5,630
38
140
292

answered Mar 12 '17 at 07:45

fingerpich

8,500
2
22
32

thank you... I have not tested it... so visually, what will users see before resolving? A blank page? – SoftTimur Mar 12 '17 at 09:32
1

Hi, yes the ui-view will be empty before resolving http://stackoverflow.com/questions/18961332/angular-ui-router-show-loading-animation-during-resolve-process – fingerpich Mar 12 '17 at 10:07

Asynchronous communication cross pages

1 Answers1

Linked