1

I'm using the sample app Projection found here, which allows me to have one main app window open, and display on my second monitor some other stuff.

Now what I want is for the javascript between the two windows to have some way of sharing state or passing messages. In scenario1.js, the code to start the new window looks like this:

var view = window.open("ms-appx:///html/secondaryView.html", null, "msHideView=yes");

Now I know for a fact that this variable has a view.postMessage() function, but in the javascript for the new window (secondaryView.js), I don't know how to listen for the message. I also don't know if there's any other obvious way of sharing state that I haven't thought of, between the two windows.

[edit] The localStorage solution provided in here is fine and works, but isn't as good as using view.postMessage

TKoL
  • 13,158
  • 3
  • 39
  • 73
  • [MDN shows how to receive posted messages](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage): `window.addEventListener("message", receiveMessage, false);` – Raymond Chen Feb 07 '19 at 02:43
  • @RaymondChen thank you. If you want to post it as an answer you can, I will mark it as correct (preferrably provide a code sample that shows how to send data and how to receive data), or I can post a more complete solution myself if you don't want the points. – TKoL Feb 07 '19 at 09:31
  • You can create an answer, or mark as duplicate of [Javascript; communication between tabs/windows with same origin](https://stackoverflow.com/questions/2236828/javascript-communication-between-tabs-windows-with-same-origin). The UWP angle is a red herring. postMessage is a JavaScript standard API, not a UWP API. – Raymond Chen Feb 07 '19 at 14:30
  • All of the accepted answers in the 'duplicate' talk about using localStorage and watching for changes there. The answer you gave me is actually significantly more satisfying than that, so I'll just post it here as the answer. – TKoL Feb 08 '19 at 13:14
  • Okay, [this](https://stackoverflow.com/questions/23046009/pass-values-from-the-main-window-to-another-window/23046928) might be a better duplicate. – Raymond Chen Feb 08 '19 at 15:05
  • Also, you can take advantage of the `transfer` parameter to `postMessage` which lets you [pass Transferable objects](https://stackoverflow.com/questions/16071211/using-transferable-objects-from-a-web-worker) between windows. – Raymond Chen Feb 08 '19 at 15:18

1 Answers1

2

From any javascript code in your first window, you can post a message like so:

view.postMessage({ a: 'b' }, '*'); // may replace * with the beginning of the result of window.location.href

And in the second window, this code will receive the message:

window.addEventListener('message',
        function(event) {
            var message = event.data; // event.data = { a: 'b' }
        });

To post a message from the second window to the first window, it's quite similar, but use window.opener to refer to the view that opened this view:

window.opener.postMessage({ a: 'this is from the second window' }, '*');

And watch for it in the original javascript process, again, with window.addEventListener('message', (event) => {})

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Thanks to Raymond Chen

TKoL
  • 13,158
  • 3
  • 39
  • 73