API de messagerie inter-domaines HTML5 window/iframe introduction_html5 compétences du didacticiel

Adresse d'origine : API window.postMessage de HTML5
Exemple en ligne : Utilisation de window.postMessage de HTML5(Veuillez ouvrir la console pour afficher le journal)

I a écrit un plug-in MooTools "PostMessager" pour encapsuler window.postMessage, vous pouvez cliquer ici pour télécharger

Peu de gens comprennent l'API de l'interface window.postMessage de HTML5 ! window.postMessage permet le transfert inter-domaines de données et d'informations entre plusieurs fenêtres/frames. Essentiellement, window.postMessage joue le rôle d'une requête Ajax inter-domaines. Bien entendu, elle ne nécessite pas la coopération d'un serveur distant. Ensuite, nous présenterons le fonctionnement de window.postMessage et comment l'utiliser dans FireFox, IE8, Opera, Safari et Chrome

1. Fin de l'envoi du message
L'ensemble du processus. la première étape consiste à créer une « source d’information ». Grâce à cette source de message, nous pouvons envoyer des données au niveau de la fenêtre (message) à la fenêtre (ou iframe) nouvellement ouverte. Dans l'exemple suivant, la fréquence d'envoi des messages à la nouvelle fenêtre est d'une fois toutes les 6 secondes et l'écoute des événements est configurée pour traiter les informations de réponse renvoyées par la fenêtre cible.

Copier le code

Le code est le suivant :

fonction trace(message){
var infos = Array.prototype.slice.call(arguments,0).join(" ");
if("console" dans la fenêtre){
console.log(infos); } else {
alert(infos);
}
};
// Créer une fenêtre pop-up
var domain = 'http://scriptandstyle.com'
var myPopup = window.open (domain '/windowPostMessageListener.html','myWindow');
//Envoyer des messages régulièrement
setInterval(function(){
var message = 'Maintenant heure : ' (nouveau Date().getTime( ));
trace('Source de données. Message envoyé : 'message);
myPopup.postMessage(message,domain); //Envoyer les informations sur les données et définir l'URI cible
},6*1000 );
function bindEvent(target,noOnEventName,handler){
if(window.addEventListener){
target.addEventListener(noOnEventName,handler)
} else if(window); .attachEvent){
// La fonction de réglage d'écoute d'IE est attachEvent
target.attachEvent("on" noOnEventName,handler
} else {
target["on" noOnEventName]=handler); ;
}
};
// Surveiller les informations reçues
bindEvent(window,'message',function(event) {
// Recevoir uniquement les messages d'un domaine spécifique
if(event.origin !== 'http://scriptandstyle.com') return;
trace('Informations de réponse reçues : ',event.data);

L'auteur de l'article original utilise 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 une fonction pour envelopper l'événement, ou utilisez une bibliothèque de classes prête à l'emploi, telle que MooTools ou jQuery/dojo pour y parvenir.
Dans l'exemple ci-dessus, si la nouvelle fenêtre s'ouvre normalement, nous pouvons envoyer un message via la référence d'objet fenêtre myPopup et spécifier l'URI (protocole, nom d'hôte, numéro de port) qui doit correspondre (si l'utilisateur saute dans l'enfant fenêtre vers d'autres pages, le message ne sera pas envoyé).

De même, nous avons également lié la fonction de gestionnaire d'événements pour recevoir le message. Pour rappel, il est important de vérifier l'attribut origin de l'événement message, car il est possible de recevoir les messages qui vous sont envoyés par tous les URI, afin que vous ne soyez pas confus lors de l'interaction avec plusieurs frames. Après avoir vérifié l'origine, la manière de traiter ce message dépend de votre activité et de vos besoins spécifiques.

Si vous utilisez iframe, alors le code est le suivant :

Copiez le code

Le code est comme suit :

// Créez également une autre fenêtre (iframe, frame, frameset, top, window sont tous des objets liés à la fenêtre.)

var domain = 'http://scriptandstyle.com ';

var iframe = document.getElementById('myIFrame').contentWindow;
// Envoyer des messages en boucle. Bien entendu, des méthodes basées sur les événements peuvent également être utilisées. . .
setInterval(function(){
var message = 'Heure actuelle : ' (new Date().getTime());
trace('Data source.Message sent: ' message);
iframe.postMessage(message,domain); //Envoyer les informations sur les données et définir l'URI cible
},6*1000


Assurez-vous de pouvoir accéder à l'attribut contentWindow de l'objet iframe ; —— Et pas seulement l'objet iframe.

2. Fin de réception du message

La deuxième étape de l'ensemble du processus consiste à préparer la fenêtre cible. Tout ce que la fenêtre de destination a à faire est d'écouter l'événement de message et bien sûr de vérifier la source du message d'origine de l'événement. Rappel encore : le gestionnaire d'événements de message peut accepter les messages qui lui sont envoyés depuis n'importe quel nom de domaine, il est donc très important de vérifier l'origine et de traiter uniquement les messages de la liste de confiance.

Copier le code

Le code est le suivant :

// Surveiller les informations reçues
bindEvent(window,'message',function(event) {
// Recevoir uniquement les messages de domaines spécifiques<.> if(event.origin !== 'http://davidwalsh.name') return;
trace('Informations écoutées : ',event.data); .source .postMessage(""Bonjour les amis, j'ai reçu le message, event.origin);
},false);


L'exemple ci-dessus répond au message de réponse au carré de requête); .
Les attributs importants de l'événement message sont :

source - l'objet window/iframe qui envoie le message
origin - l'URI correspondant à la fenêtre qui envoie le message (protocole, domaine et port, si spécifié)
data - informations de données spécifiques
Ces trois objets sont indispensables à la messagerie et à la vérification.


Remarques sur l'utilisation de window.postMessage

Comme toutes les autres technologies Web, les dangers sont évidents en cas d'utilisation incorrecte (sans vérifier la source de l'événement). Bien entendu, la sécurité dépend de vous. window.postMessage est très similaire à PHP en technologie JavaScript (haha, petite publicité !).window.postMessage est une technologie très cool, qu'en pensez-vous ?