一个javascript控制两个单独的浏览器窗口。

Question

我正在使用HTML5 canvas元素构建一个所谓的随机艺术生成器。现在我希望实时控制画布上视觉动作的按钮位于一个单独的窗口中。有没有办法做到这一点？我想我需要一个javascript来控制两个独立的浏览器窗口。

Answer 1

如果您的两个页面来自同一个来源（协议，主机名，端口），则可以使用跨文档消息传递。这就是它的完成方式：

在您应该发送信息的页面上（使用您的按钮），您可以调用此信息：

window.postMessage(message, origin);

将发送提供给给定来源的消息（您的其他页面的网址）。

在您的接收页面上，您可以添加此功能：

window.addEventListener("message", yourfunction);

其中yourfunction采用参数e。 e的类型为MessageEvent，包含以下属性：

• 数据
• 来源
• source（返回与发送脚本关联的窗口。）

这就是它的全部内容！

Answer 2

您需要跨文档消息传递的通信API。

您可以使用postMessage发送和接收消息。

//Post message
window.postMessage('Hello world...', 'http://example.com');

//Bind events
window.addEventListener('message', messageHandler, true);

另外不要忘记检查浏览器支持：

if(typeof window.postMessage === "undefined"){
   alert('Your browser doesnt support this functionality');
}

This tutorial might be usefull.