一个JavaScript控制两个独立的浏览器窗口。

Question

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

Answer 1

您需要跨文档消息的通信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.

Answer 2

您可以使用跨文档的消息传递前提是你的两页来自同一产地（协议，主机名， 港口）。这是它是如何做：

在你的页面应该发送的信息（即与您的按钮），你调用此：

window.postMessage(message, origin); 

将发送提供给定（网址原点的消息你其他页面）。

在您receving页面你有这样的功能：

window.addEventListener("message", yourfunction); 

其中yourfunction需要一个参数，e。 e是类型MessageEvent事件，并包含以下属性：

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

而这一切就是它！