一個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事件，幷包含以下屬性：

• 數據
• 起源
• 源（返回與發送腳本關聯的窗口。）

而這一切就是它！