Commentaire: Si vous souhaitez réaliser la transmission de messages inter-documents, vous devez d'abord écouter l'événement de message de l'objet Window, puis utiliser la méthode postMessage () de l'objet Window pour envoyer des messages à d'autres fenêtres. Ensuite, présentons-le en détail. Les amis intéressés peuvent y faire référence.
Écoutez l'événement du message de l'objet Windowwindow.addeventListener ("message", fonction (événement) {
// gérer le code du programme
}, FAUX);
Utilisez la méthode PostMessage () de l'objet Window pour envoyer des messages à d'autres fenêtres. La définition de cette méthode est la suivante:
otherwindow.PostMessage (message, Targetorigin);
Cette méthode utilise deux paramètres: le premier paramètre est le texte du message envoyé, mais il peut également s'agir de n'importe quel objet JavaScript (l'objet est converti en texte via JSON); Le deuxième paramètre est l'adresse URL de la fenêtre d'objet qui reçoit le message. Vous pouvez utiliser Wildcard * pour spécifier toutes les adresses dans la chaîne d'adresse URL, mais il est recommandé d'utiliser une adresse URL précise. ATHERWINDOW est une référence à l'objet de fenêtre à envoyer. Vous pouvez renvoyer l'objet via la méthode Window.Open (), ou renvoyer l'objet de fenêtre attribué à une seule trame en spécifiant un numéro de séquence (index) ou un nom dans le tableau de la fenêtre.
Exemple
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8" />
<Title> Exemple de document principal pour le transfert de messages inter-documents </TITAL>
<script type = "text / javascript" src = "http://code.jquery.com/jquery-1.6.4.min.js"> </ script>
<script type = "text / javascript">
$ (function () {
// Écoutez les événements de message.
window.addeventListener ("message", fonction (événement) {
// ignore les messages envoyés par des pages autres que l'URL spécifiées.
if (event.origin! = "http://www.blue-butterfly.net") return;
alert (event.data); // Afficher le message.
}, FAUX);
$ ("# iframeContent"). Load (fonction (événement) {
// Envoyez un message à la sous-page
this [0] .PostMessage ("Hello", "http://www.blue-butterfly.net/test/");
});
});
</cript>
</ head>
<body>
<dique>
<h1> Section de la communication inter-domaine </h1>
</-header>
<iframe src = "http://www.blue-butterfly.net/test/"> </ iframe>
</docy>
</html>
Le code dans la sous-page est le suivant:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8" />
<script type = "text / javascript" src = "http://code.jquery.com/jquery-1.6.4.min.js"> </ script>
<script type = "text / javascript">
$ (function () {
window.addeventListener ("message", fonction (événement) {
if (event.origin! = "http: // lulingniu") retourner;
$ ("# console"). APPEND (event.origin) .Apnd ("Message de:") .Apnd (event.data);
// Envoyez un message à la page principale.
event.source.postMessage ("Bonjour, il y a:" + this.location, event.origin);
}, FAUX);
});
</cript>
</ head>
<body>
<p> C'est ce qui est dans l'IFRAME. </p>
<div> </div>
</docy>
</html>
• En écoutant l'événement de message de l'objet Window, vous pouvez recevoir des messages.
• En accédant à la propriété Origin de l'événement de message, vous pouvez obtenir la source d'envoi du message (dans cet exemple, la source d'envoi de la page principale est et la source d'envoi de la sous-page est). Remarque: L'adresse URL de la source d'envoi et du site Web n'est pas le même concept. La source d'envoi comprend uniquement le nom de domaine et le numéro de port. Afin de ne pas recevoir de messages envoyés par malveillance par d'autres sources, il est préférable de vérifier la source d'envoi.
• En accédant à l'attribut de données de l'événement de message, le contenu du message peut être obtenu (peut être n'importe quel objet JavaScript, en utilisant JSON).
• Envoyer des messages à l'aide de la méthode postMessage ().
• En accédant à la propriété source de l'événement de message, vous pouvez obtenir l'objet proxy de la fenêtre de la source de message.