HTML5 PostMessage résout

Habituellement, lors du développement Web, plusieurs problèmes sont souvent rencontrés en plus des clients et de la transmission des serveurs.

1. Transmission de données des pages et de nouvelles fenêtres ouvertes

2. Messages entre plusieurs fenêtres

3. Page et transmission de messages IFRAME imbriqués

4. Transmission de données croisées des trois problèmes ci-dessus

postMessage ()

Ces problèmes ont certaines solutions, mais l'API du message introduit par HTML5 peut être plus pratique, efficace et résolu en toute sécurité. La méthode PostMessage () permet aux scripts de différentes sources d'utiliser des méthodes asynchrones pour une communication limitée, qui peuvent réaliser des fichiers de texte croisé, des messages multi-fenêtres et des domains croisés.

La méthode postmessage (données, origine) accepte deux paramètres

1. Données: les données à passer, la spécification HTML5 a mentionné que le paramètre peut être n'importe quel type de base ou objet reproductible de JavaScript, mais tous les navigateurs n'ont pas fait cela. Besoin d'utiliser la méthode json.stringify () pour sérialiser le paramètre de l'objet lors du passage des paramètres.

2.ORIGIN: Paramètres de chaîne, indiquez la source de la fenêtre cible, ProtoCol + Host + Port Number [+ URL], URL sera ignoré, vous pouvez donc l'écrire. Faites passer le message à la fenêtre spécifiée. à/.

http://test.com/index.html

 <Div Style = Largeur: 200px; src = http://lslib.com/lslib.html> </ iframe> </div>

Nous pouvons transmettre le message à la page Iframe Cross -domain http: //lslib.html sur le cross -domain si http://test.com/index.html transmet les messages

 Window.onLoad = function () {window.frames [0] .PostMessage ('getColor', 'http://lslib.com');}

Recevoir un message

La page ci-dessus test.com a envoyé un message à lslib.com, alors comment recevoir des messages sur la page lslib.com et surveiller l'événement de message de l'événement de message de Window.

http://lslib.com/lslib.html

 Window.addeventListener ('message', fonction (e) {if (e.source! = Window.parent) return; var color = contener.style.backgroundcolor; window.parent. PostMessage (couleur, '*');}, FAUX;

De cette façon, nous pouvons recevoir le message transmis par n'importe quelle fenêtre.

Il y a plusieurs attributs importants

1. Données: Comme son nom l'indique, c'est le message qui est transmis

2.Source: objet fenêtre pour envoyer des messages

3.Origin: source d'envoi d'une fenêtre de message (protocole + hôte + numéro de port)

De cette façon, vous pouvez recevoir des messages croisés.

Demo simple

Dans cet exemple, la div à gauche changera en fonction du changement de couleur de la div dans la droite à droite

 <! <div id = couleur> frame couleur </ div> </ div> <div> <iframe id = child src = http://lslib.com/lslib.html> </div> </ div> <script type = Text / javascript> window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');} window.addd EventListener ('message', fonction (e) {var color = e.data;

 <! = Conteneur onClick = ChangeColor (); )); ;}, false); ';} Else {color =' rgb (204,102,0) ';} contener.style.backgroundcolor = colori .html

Lorsque la page est chargée dans l'exemple, la page d'accueil envoie la demande «getColor» à iframe (les paramètres ne sont pas pratiques)

 Window.onLoad = function () {window.frames [0] .PostMessage ('getColor', 'http://lslib.com');}

Iframe reçoit le message et envoie la couleur actuelle à la page principale

 Window.addeventListener ('message', fonction (e) {if (e.source! = Window.parent) return; var color = contener.style.backgroundcolor; window.parent. PostMessage (couleur, '*');}, FAUX;

Recevez des messages sur la page d'accueil, modifiez votre propre couleur div

 Window.addeventListener ('message', fonction (e) {var color = e.data; document.getElementById ('colore'). Style.backgroundColor = couleur;);

Lorsque vous cliquez sur Iframe déclencher sa méthode de changement de couleur, envoyez la dernière couleur à la page principale

 Fonction ChangeColor () {var Color = Container.Style.BackgroundColor; RGB (204,102,0) ';} conteneur.style.backgroundColor = Color;

La page d'accueil utilise toujours le programme qui vient d'écouter l'événement de message pour gérer sa propre décoloration

 Window.addeventListener ('message', fonction (e) {var color = e.data; document.getElementById ('colore'). Style.backgroundColor = couleur;);

enfin

L'utilisation simple résout le gros problème. La compatibilité du navigateur So-Soveled est presque devenue un problème que IE a commencé. Essence Essence Cependant, la bonne nouvelle est comme LocalStorage. Détermine s'il faut prendre en charge AddEventListener.

Ce qui précède est tout le contenu de cet article.