Beispiel für die dokumentübergreifende Übertragung von HTML5-Nachrichten. Diskussion_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Beispiel für die dokumentübergreifende Übertragung von HTML5-Nachrichten. Diskussion_HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:49:49

Original

1373 Leute haben es durchsucht

Überwachen Sie das Nachrichtenereignis des Fensterobjekts

Kopieren Sie den Code

Der Code lautet wie folgt:

window .addEventListener("message", function(event) {
// handler code
}, false);

Verwenden Sie die postMessage()-Methode des Fensterobjekts Um Nachrichten an andere Fenster zu senden, ist die Methode wie folgt definiert:

Code kopieren

Der Code lautet wie folgt:

otherwindow.postMessage(message, targetOrigin);

Diese Methode verwendet zwei Parameter: Der erste Parameter ist der Text der gesendeten Nachricht, es kann aber auch ein beliebiges JavaScript sein Objekt (Konvertieren des Objekts in Text über JSON); Der zweite Parameter ist die URL-Adresse des Objektfensters, das die Nachricht empfängt. Sie können den Platzhalter „*“ in der URL-Adresszeichenfolge verwenden, dies wird jedoch empfohlen Verwenden Sie eine genaue URL-Adresse. otherwindow besteht darin, einen Verweis auf das Fensterobjekt zu senden. Sie können das Objekt über die Methode window.open() zurückgeben oder das Fensterobjekt zurückgeben, das einem einzelnen Frame zugeordnet ist, indem Sie die Seriennummer (Index) oder den Namen in window.frames angeben Array.
Beispiel

Code kopieren

Der Code lautet wie folgt:

< !DOCTYPE html>
title>
Skripttyp ="text/javascript">
$(function() {
// Auf Nachrichtenereignisse warten.
window.addEventListener("message", function(event) {
// Ignorieren Sie die angegebene URL-Nachricht, die von anderen Seiten gesendet wurde.
if(event.origin != "http://www.blue-butterfly.net") return; . 🎜>}, false);
$("#iframeContent").load(function(event) {
// Nachricht an Unterseite senden
this[0].postMessage("Hallo" , " http://www.blue-butterfly.net/test/");
});

" src ="http://www.blue-butterfly.net/test/">

sub Der Code auf der Seite lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

"text/javascript" src="http ://code.jquery.com/jquery-1.6.4.min.js">

Dies ist der Inhalt im Iframe.

Überwachen Sie das Nachrichtenereignis des Fensterobjekts und empfangen Sie Nachrichten.
•Durch Zugriff auf das Ursprungsattribut des Nachrichtenereignisses können Sie die Sendequelle der Nachricht ermitteln (in diesem Beispiel ist die Sendequelle der Hauptseite „http://Lulingniu“ und die Sendequelle der Unterseite ist „http://www.blue“ -butterfly.net“). Hinweis: Die sendende Quelle und die URL-Adresse der Website sind nicht dasselbe Konzept. Die sendende Quelle umfasst nur den Domänennamen und die Portnummer. Um den Empfang von Nachrichten zu vermeiden, die in böswilliger Absicht von anderen Quellen gesendet werden, ist es am besten, die sendende Quelle zu überprüfen .
• Durch Zugriff auf das Datenattribut des Nachrichtenereignisses können Sie den Nachrichteninhalt abrufen (kann ein beliebiges JavaScript-Objekt sein, das JSON verwendet).
•Verwenden Sie die postMessage()-Methode, um Nachrichten zu senden.
•Durch Zugriff auf das Quellattribut des Nachrichtenereignisses können Sie das Proxy-Objekt des Fensters abrufen, von dem aus die Nachricht gesendet wird.