Communication entre fenêtres : utiliser .postMessage() et WeakMap

Introduction

La communication entre des fenêtres de même origine est limitée en JavaScript. Cependant, il existe une méthode pour contourner cette limitation : .postMessage(). Dans ce tutoriel, nous allons explorer comment utiliser cette méthode pour envoyer des messages entre des pages web différentes.

Nous allons également aborder la WeakMap, un objet qui permet de stocker des paires clé/valeur avec des clés faibles, c’est-à-dire des objets qui sont référencés de manière faible par le garbage collector.

Utiliser .postMessage()

La méthode .postMessage() est une façon sûre d’autoriser la communication entre des scripts provenant de différents origins. Elle permet de contourner les restrictions de sécurité qui empêchent généralement deux pages web différentes de communiquer directement avec JavaScript.

Créer un message

Pour envoyer un message, vous devez avoir accès au code JavaScript de la page cible. Voici un exemple de comment créer un message :

let message = {
  type: 'hello',
  data: 'Bonjour !'
};

Envoyer le message

Une fois que vous avez créé votre message, vous pouvez l’envoyer à une fenêtre cible en utilisant la méthode .postMessage() :

childWindow.postMessage(JSON.stringify(message), 'http://receiver.com');

Dans cet exemple, nous utilisons JSON.stringify() pour convertir le message en chaîne de caractères avant de l’envoyer. Nous devons également spécifier l’origine de la fenêtre cible (http://receiver.com).

Recevoir les messages

Pour recevoir des messages, vous devez écouter les événements message sur la fenêtre :

window.addEventListener('message', receiveMessage);

Une fois que le message est reçu, vous pouvez le traiter en fonction de son type et de ses données.

Utiliser WeakMap

Une WeakMap est un objet qui permet de stocker des paires clé/valeur avec des clés faibles. Cela signifie que si la clé n’est plus référencée par d’autres parties du code, le garbage collector peut la supprimer.

Créer une WeakMap

Pour créer une WeakMap, vous devez utiliser le constructeur new WeakMap() :

const weakmap = new WeakMap();

Stocker des valeurs

Vous pouvez stocker des valeurs dans une WeakMap en utilisant la méthode .set() :

weakmap.set(obj1, 7);

Dans cet exemple, nous stockons la valeur 7 avec la clé obj1.

Récupérer des valeurs

Pour récupérer une valeur associée à une clé, vous pouvez utiliser la méthode .get() :

console.log(weakmap.get(obj1)); // 7

Si la clé n’existe pas dans la WeakMap, la méthode .get() retourne undefined.

Supprimer des éléments

Pour supprimer un élément d’une WeakMap, vous pouvez utiliser la méthode .delete() :

weakmap.delete(obj1);
console.log(weakmap.has(obj1)); // false

Dans cet exemple, nous supprimons l’élément associé à la clé obj1 et vérifions que la clé n’existe plus dans la WeakMap.

Conclusion

Dans ce tutoriel, nous avons vu comment utiliser .postMessage() pour envoyer des messages entre des pages web différentes, ainsi que comment utiliser une WeakMap pour stocker des paires clé/valeur avec des clés faibles. Nous avons également abordé les meilleures pratiques et les pièges à éviter lors de l’utilisation de ces méthodes.

Nous espérons que ce tutoriel vous aura été utile ! Si vous avez des questions ou des commentaires, n’hésitez pas à les partager.

Prochaines étapes

• Explorer d’autres méthodes pour communiquer entre fenêtres, telles que postMessage() avec une fonction de rappel.
• Utiliser des WeakMap pour stocker des données dans des applications web complexes.