un javascript contrôlant deux fenêtres de navigateur distinctes.

Question

Je construis un soi-disant générateur d'art aléatoire en utilisant l'élément canvas HTML5. Maintenant, je veux que les boutons qui contrôlent l'action visuelle sur la toile en temps réel soient dans une fenêtre séparée. Y-a-t-il un moyen de faire ça? Je suppose que j'ai besoin d'un javascript contrôlant deux fenêtres de navigateur distinctes.

Answer 1

Vous avez besoin d'une API de communication pour la messagerie documentaire croisée. Vous pouvez utiliser postMessage pour envoyer et recevoir des messages.

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

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

aussi ne pas oublier de vérifier le soutien du navigateur:

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

This tutorial might be usefull.

Answer 2

Vous pouvez utiliser la messagerie inter-documents à condition que vos deux pages sont de la même origine (protocole, nom d'hôte , Port). Voici comment cela se fait:

Sur votre page qui devrait envoyer des informations (qui avec vos boutons) vous invoquez ceci:

window.postMessage(message, origin); 

qui enverra le message fourni à l'origine donné (l'url de votre autre page).

Sur votre page receving vous incluez cette fonction:

window.addEventListener("message", yourfunction); 

où yourfunction prend un argument, e. e est du MessageEvent de type et contient les propriétés suivantes:

• données
• origine
• source (Retourne la fenêtre associée avec le script d'envoi.)

Et c'est tout ce qu'il ya à il!