在 UWP Javascript 应用程序中的两个窗口之间共享状态或传递消息答案

【问题标题】：Share state or pass messages between two windows in UWP Javascript app在 UWP Javascript 应用程序中的两个窗口之间共享状态或传递消息
【发布时间】：2019-06-30 17:49:00
【问题描述】：

我正在使用示例应用 Projection found here，它允许我打开一个主应用窗口，并在我的第二台显示器上显示一些其他内容。

现在我想要的是让两个窗口之间的 javascript 能够以某种方式共享状态或传递消息。在scenario1.js 中，启动新窗口的代码如下所示：

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

现在我知道这个变量有一个view.postMessage() 函数，但是在新窗口的javascript (secondaryView.js) 中，我不知道如何收听该消息。我也不知道在两个窗口之间是否还有其他我没有想到的明显的共享状态方式。

[edit] here 中提供的 localStorage 解决方案很好并且有效，但不如使用 view.postMessage 好

【问题讨论】：

MDN shows how to receive posted messages: window.addEventListener("message", receiveMessage, false);
@RaymondChen 谢谢。如果您想将其作为答案发布，我会将其标记为正确（最好提供显示如何发送数据和如何接收数据的代码示例），或者如果您不这样做，我可以自己发布更完整的解决方案不想要积分。
您可以创建答案，或标记为Javascript; communication between tabs/windows with same origin 的重复项。 UWP 角度是一个红鲱鱼。 postMessage 是 JavaScript 标准 API，而不是 UWP API。
“重复”中所有接受的答案都在谈论使用 localStorage 并观察那里的变化。你给我的答案其实比这更令人满意，所以我将它作为答案发布在这里。
好的，this 可能是一个更好的副本。

标签： javascript uwp

【解决方案1】：

从您第一个窗口中的任何 javascript 代码，您可以像这样发布消息：

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

在第二个窗口中，这段代码将收到消息：

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

将消息从第二个窗口发布到第一个窗口，非常相似，但使用window.opener 来指代打开此视图的视图：

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

并在原始的 javascript 进程中再次使用 window.addEventListener('message', (event) => {}) 观察它

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

感谢 Raymond Chen

【讨论】：