Explication détaillée de l'utilisation de base de l'API de communication dans les compétences du didacticiel HTML5_html5

1. Communication de messages entre documents
La communication de messages entre documents peut garantir une communication inter-sources sécurisée entre les iframes, les onglets et les fenêtres. Il définit l'API postMessage comme moyen standard d'envoyer des messages. Il est très simple d'utiliser postMessage pour envoyer des messages. Le code est le suivant :
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
Lors de la réception. messages, il suffit de cliquer sur la page Ajouter une fonction de gestion d'événements. Lorsqu'un message arrive, la source du message est vérifiée pour déterminer s'il faut traiter le message.
L'événement message est un événement DOM avec des attributs de données et d'origine. L'attribut data est le message réel délivré par l'expéditeur et l'attribut origin est la source d'envoi.
L'API postMessage est non seulement capable de communiquer entre des documents de même origine, mais elle est également utile lorsque le navigateur n'autorise pas les communications non originales. De par sa cohérence et sa facilité d'utilisation, postMessage est également recommandé lors de la communication entre documents de même origine. L'API postMessage doit toujours être utilisée lors de la communication dans un environnement JavaScript, par exemple lors de la communication avec HTML5 Web Workers.
1.1 Comprendre la sécurité de l'origine
HTML5 Rongguang introduit le concept d'origine pour clarifier et améliorer la sécurité du domaine. Une origine est un sous-ensemble d'adresses utilisé pour établir des relations de confiance sur le réseau. La source se compose de règles (schéma), d'hôte (hôte) et de port (poste).
Le chemin n'est pas pris en compte dans la notion de source.
HTML5 définit la sérialisation des sources. Les sources apparaissent sous forme de chaînes dans les API et les protocoles.
Les règles de sécurité PostMessage garantissent que les messages ne sont pas transmis à des pages sources involontaires. Lors de l'envoi d'un message, c'est l'expéditeur qui précise la source du destinataire. Si la fenêtre utilisée par l'expéditeur pour appeler postMessage n'a pas d'origine spécifique (par exemple, l'utilisateur a sauté vers un autre site), le navigateur ne délivrera pas le message.
De même, lors de la réception d'un message, la source de l'expéditeur est également incluse dans le message. Pour éviter toute falsification, la source du message est fournie par le navigateur. Le destinataire peut décider quels messages traiter et lesquels ignorer. Nous pouvons conserver une liste blanche et demander au navigateur de traiter uniquement les messages provenant de sources fiables.
Il est préférable de ne jamais évaluer les chaînes provenant de tiers. De plus, évitez d’utiliser la méthode eval pour traiter les chaînes internes à l’application. JSON peut être consommé via les analyseurs window.JSON ou json, .org.
1.2 Prise en charge du navigateur pour la communication de messages entre documents
Une approche courante consiste à détecter si l'attribut withCredentials existe dans l'objet XMLHttpRequest :
Astuces L'interface MessageEvent définie par HTML5 fait également partie de HTML5 WebSockets et HTML5 WebWorkers. La fonction de communication de HTML5 utilise la même API pour recevoir des messages que l'interface MessageEvent. D'autres API de communication, telles que l'API EventSource et Web Workers, utilisent également l'interface MessageEvent pour transmettre des messages.
1.4 Créer une application à l'aide de l'API postMessage
Envoyer un message Vous pouvez envoyer un message en appelant la fonction postMessage() dans l'objet fenêtre de la page cible. Le code est le suivant. suit :


Code JavaScriptCode JavaScript