2

HTML5 キャンバス要素を使用して、いわゆるランダム アート ジェネレーターを構築しています。ここで、キャンバス上の視覚的なアクションをリアルタイムで制御するボタンを別のウィンドウに配置したいと考えています。それを行う方法はありますか？2 つの別々のブラウザ ウィンドウを制御する 1 つの JavaScript が必要だと思います。

4

2 に答える 2

2

2つのページが同じオリジン（プロトコル、ホスト名、ポート）からのものである場合は、クロスドキュメントメッセージングを使用できます。これはそれが行われる方法です：

（ボタンを使用して）情報を送信する必要があるページで、これを呼び出します。

window.postMessage(message, origin);

指定されたオリジン（他のページのURL）に提供されたメッセージを送信します。

受信ページには、次の機能が含まれています。

window.addEventListener("message", yourfunction);

ここyourfunctionで、引数を取りますe。eタイプはMessageEventで、次のプロパティが含まれています。

  • データ
  • 元
  • source（送信スクリプトに関連付けられたウィンドウを返します。）

そして、それがすべてです！

于 2012-12-03T09:44:28.343 に答える
0

クロスドキュメントメッセージングには通信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');
}

このチュートリアルは役に立つかもしれません。

于 2012-12-03T09:43:55.877 に答える