Commentaire: Window.PostMessage permet à plusieurs fenêtres / cadres de transmettre des données et des informations entre les domaines. Voici une description de la façon dont Window.
Adresse originale: API Window.PostMessage de HTML5Exemple en ligne: utilisant la fenêtre de HTML5.PostMessage (veuillez ouvrir la console pour afficher le journal)
J'ai écrit un plugin de mootools postmessager pour encapsuler la fenêtre.PostMessage, vous pouvez cliquer ici pour le télécharger!
Peu de gens connaissent l'API d'interface HTML5 Window.PostMessage. Window.PostMessage permet de passer des données et des informations entre les domaines entre plusieurs fenêtres / cadres. Essentiellement, Window.PostMessage joue un rôle des demandes AJAX à domaine croisé, et bien sûr, il ne nécessite pas de serveur distant pour collaborer. Ensuite, nous présenterons comment fonctionne Window.PostMessage et comment l'utiliser dans Firefox, IE8 +, Opera, Safari et Chrome.
1. Message Envoi fin
La première étape de l'ensemble du processus consiste à configurer une source de message. Grâce à cette source de message, nous pouvons envoyer des données (messages) au niveau de la fenêtre à la fenêtre nouvellement ouverte (ou iframe). Dans l'exemple suivant, la fréquence d'envoi de messages à une nouvelle fenêtre est une fois toutes les 6 secondes, et l'écoute des événements est défini pour traiter les informations de réponse renvoyées par la fenêtre cible.
fonction trace (message) {
var infos = array.prototype.slice.call (arguments, 0) .join ("");
if ("console" dans la fenêtre) {
console.log (infos);
} autre {
alerte (infos);
}
};
// Créer une fenêtre contextuelle
var domain = 'http://scriptandstyle.com';
var mypopup = window.open (domaine + '/windowPostMessageListener.html' ,'mywindow');
// Envoie des messages régulièrement
setInterval (function () {
var message = 'Heure actuelle:' + (new Date (). GetTime ());
trace ('Source de données. Message envoyé:' + message);
myPopup.postMessage (message, domaine); // Envoyez des informations sur les données et définissez l'uri cible
}, 6 * 1000);
Fonction BindEvent (Target, NoOneventName, Handler) {
if (window.addeventListener) {
Target.AddeventListener (NoOneventName, Handler);
} else if (window.attachevent) {
// La fonction de paramètre d'écoute de IE est attachée
Target.Attachevent ("ON" + NoOneventName, Handler);
} autre {
Target ["ON" + NoOneventName] = Handler;
}
};
// Écoutez les informations reçues.
lisingEvent (fenêtre, 'message', fonction (événement) {
// ne reçoit que des messages de domaines spécifiques
if (event.origin! == 'http://scriptandstyle.com') retourner;
Trace ('Informations de réponse reçues:', event.data);
},FAUX);
L'auteur d'origine a utilisé la méthode Window.AddeventListener pour lier les événements, mais une erreur sera signalée sous IE (IE est Window.Attachevent). Bien sûr, vous pouvez créer des fonctions pour envelopper des événements ou utiliser des bibliothèques de classe prêtes à l'emploi, telles que mootools ou jQuery / Dojo pour les implémenter.
Dans l'exemple ci-dessus, si la nouvelle fenêtre s'ouvre normalement, nous pouvons envoyer un message via la référence à MyPopup de l'objet Window et spécifier l'URI (protocole, nom d'hôte, numéro de port) qui doit être apparié (si l'utilisateur passe à une autre page dans la fenêtre enfant, le message ne sera pas envoyé).
De même, nous lions également le gestionnaire d'événements pour recevoir des messages de messages. Voici un rappel qu'il est important de vérifier l'attribut d'origine de l'événement de message, car il peut recevoir des messages qui vous sont envoyés par tous les URI, afin qu'il ne soit pas confus lorsque plusieurs cadres interagissent. Après avoir vérifié l'origine, comment traiter ce message dépend de votre entreprise et de vos besoins spécifiques.
Si vous utilisez un iframe, le code est le suivant:
// Créez une autre fenêtre (iframe, cadre, camegin, haut, fenêtre et autres objets appartenant à la fenêtre.)
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById ('myiframe'). ContentWindow;
// Envoie des messages dans une boucle, bien sûr, axé sur les événements ou quelque chose comme celui-ci peut être utilisé. . .
setInterval (function () {
var message = 'Heure actuelle:' + (new Date (). GetTime ());
trace ('Source de données. Message envoyé:' + message);
iframe.postMessage (message, domaine); // Envoyez des informations sur les données et définissez l'uri cible
}, 6 * 1000);
Assurez-vous d'accéder à la propriété ContentWindow de l'objet iframe - pas seulement de l'objet iframe.
2. Récepteur de messages
La deuxième étape de l'ensemble du processus consiste à préparer la fenêtre cible. Ce que la fenêtre de but doit faire est d'écouter l'événement de message, et bien sûr, il doit également vérifier la source d'origine de l'événement. Encore une fois, le gestionnaire d'événements de message peut accepter les messages qui lui sont envoyés par n'importe quel nom de domaine, il est donc très important de vérifier l'origine et de gérer uniquement les messages qui ne font confiance que des listes.
// Écoutez les informations reçues.
lisingEvent (fenêtre, 'message', fonction (événement) {
// ne reçoit que des messages de domaines spécifiques
if (event.origin! == 'http://davidwalsh.name') return;
trace ('écouter le message:', event.data);
// Répondre au message
event.source.posessage ("Bonjour les amis, j'ai reçu le message, event.origin);
},FAUX);
L'exemple ci-dessus répond à la partie demandant.
Les attributs importants de l'événement de message sont:
Source - Envoyer une fenêtre de message / objet iframe
Origine - correspondant à l'URI (protocole, domaine et port, s'il est spécifié)
Données - Informations sur les données spécifiques
Ces trois objets sont essentiels pour le système de messages et la vérification.
Notes sur l'utilisation de la fenêtre.postmessage
Comme toutes les autres technologies Web, le danger est évident s'il est utilisé mal (aucune vérification des sources d'événements). Bien sûr, la sécurité est garantie par vous.
Window.PostMessage est très similaire à PHP dans la technologie JavaScript (haha, petite publicité!). Window.PostMessage est une technologie cool, que pensez-vous?