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

Question

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

Answer 1

只要您的两个页面来自同一来源（协议、主机名、端口），您就可以使用跨文档消息传递。这是这样做的：

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

window.postMessage(message, origin);

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

在您的接收页面上，您包含此功能：

window.addEventListener("message", yourfunction);

whereyourfunction需要一个参数，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');
}

本教程可能有用。