Kommentar: Wenn Sie eine Kreuzdokument-Nachrichtenübertragung erreichen möchten, müssen Sie zuerst das Nachrichtenereignis des Fensterobjekts anhören und dann die PostMessage () -Methode des Fensterobjekts verwenden, um Nachrichten an andere Fenster zu senden. Lassen Sie es uns als nächstes ausführlich vorstellen. Interessierte Freunde können sich darauf beziehen.
Hören Sie sich das Nachrichtenereignis des Fensterobjekts anwindow.addeventListener ("meldung", Funktion (Ereignis) {
// Programmcode verarbeiten
}, FALSCH);
Verwenden Sie die Postmessage () -Methode des Fensterobjekts, um Nachrichten an andere Fenster zu senden. Die Definition dieser Methode lautet wie folgt:
otherWindow.postMessage (Nachricht, TargetOrigin);
Diese Methode verwendet zwei Parameter: Der erste Parameter ist der gesendete Nachrichtentext, kann jedoch auch jedes JavaScript -Objekt sein (das Objekt wird über JSON in Text konvertiert). Der zweite Parameter ist die URL -Adresse des Objektfensters, die die Nachricht empfängt. Sie können Wildcard * verwenden, um alle Adressen in der URL -Adresszeichenfolge anzugeben. Es wird jedoch empfohlen, eine genaue URL -Adresse zu verwenden. OtherWindow ist ein Verweis auf das zugesandte Fensterobjekt. Sie können das Objekt über die Methode des Fensters.open () zurückgeben oder das auf einen einzelnen Frame zugeschriebene Fensterobjekt zurückgeben, indem Sie eine Sequenznummer (Index) oder den Namen des Fensters angeben.Frames -Array.
Beispiel
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8"/>
<title> Beispiel-Hauptdokument für die Übertragung zwischen Dokument </title>
<script type = "text/javaScript" src = "http://code.jquery.com/jquery-1.6.4.min.js"> </script>
<script type = "text/javaScript">
$ (function () {
// Meldungsereignisse hören.
window.addeventListener ("meldung", Funktion (Ereignis) {
// Meldungen ignorieren, die von anderen Seiten als der angegebenen URL gesendet werden.
if (event.origin! = "http://www.blue-butterfly.net") return;
Alert (Event.Data); // Nachricht anzeigen.
}, FALSCH);
$ ("#iframeContent"). Load (Funktion (Ereignis) {
// Senden Sie eine Nachricht an die Unterseite
this [0] .postMessage ("Hallo", "http://www.blue-butterfly.net/test/");
});
});
</script>
</head>
<body>
<Header>
<h1> Abschnitt der Cross-Domain-Kommunikation </h1>
</header>
<iframe src = "http://www.blue-butterfly.net/test/"> </iframe>
</body>
</html>
Der Code in der Unterseite lautet wie folgt:
<! DocType html>
<html>
<kopf>
<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 ("meldung", Funktion (Ereignis) {
if (event.origin! = "http: // lulingniu") return;
$ ("#console"). append (Event.origin) .Append ("Nachricht von:") .Append (Event.Data);
// eine Nachricht an die Hauptseite senden.
Event.Source.PostMessage ("Hallo, es gibt:" + this.location, event.origin);
}, FALSCH);
});
</script>
</head>
<body>
<p> Das ist das im Iframe. </p>
<div> </div>
</body>
</html>
• Durch das Anhören des Nachrichtenereignisses des Fensterobjekts können Sie Nachrichten empfangen.
• Durch den Zugriff auf die Herkunftseigenschaft des Nachrichtenereignisses können Sie die Sendequelle der Nachricht erhalten (in diesem Beispiel ist die Sendungsquelle der Hauptseite und die Sendungsquelle der Unterseite). Hinweis: Die URL -Adresse der Sendequelle und der Website ist nicht dasselbe Konzept. Die Sendungsquelle enthält nur den Domain -Namen und die Portnummer. Damit keine Nachrichten von anderen Quellen böswillig gesendet werden können, überprüfen Sie am besten die Sendungsquelle.
• Durch den Zugriff auf das Datenattribut des Nachrichtenereignisses kann der Nachrichteninhalt erhalten werden (kann jedes JavaScript -Objekt mit JSON sein).
• Senden Sie Nachrichten mit der Methode postMessage ().
• Durch den Zugriff auf die Quelleigenschaft des Nachrichtenereignisses können Sie das Proxy -Objekt des Fensters der Nachrichtenquelle abrufen.