Einführung in die domänenübergreifende Messaging-API für HTML5-Fenster/Iframe_HTML5-Tutorialfähigkeiten

Funktionsverfolgung (Nachricht){
var infos = Array.prototype.slice.call(arguments,0).join(" ");
if("console" in window){
console.log(infos);
} else {
alert(infos);
}
// Erstelle ein Popup-Fenster
var domain = 'http://scriptandstyle.com'; var myPopup = window.open (domain '/windowPostMessageListener.html','myWindow');
//Nachrichten regelmäßig senden
setInterval(function(){
var message = 'Jetzt Zeit: ' (neu Date().getTime( ));
trace('Datenquelle. Nachricht gesendet: '
myPopup.postMessage(message,domain); //Dateninformationen senden und Ziel-URI festlegen
},6*1000 );
function bindEvent(target,noOnEventName,handler){
if(window.addEventListener){
target.addEventListener(noOnEventName,handler)); .attachEvent){
// Die Listening-Einstellungsfunktion von IE ist attachmentEvent
target.attachEvent("on" noOnEventName,handler); else {
target["on" noOnEventName]=handler ;
}
// Überwachen Sie die empfangenen Informationen
bindEvent(window,'message',function(event) {
// Empfangen Sie nur Nachrichten von einer bestimmten Domäne
if(event.origin !== 'http://scriptandstyle.com') return;
trace('Antwortinformationen erhalten: ',event.data},false); 🎜>
Der Autor des Originalartikels verwendet die Methode window.addEventListener, um Ereignisse zu binden, aber unter IE wird ein Fehler gemeldet (IE ist window.attachEvent). Natürlich können Sie eine Funktion zum Umschließen des Ereignisses erstellen. oder verwenden Sie eine vorgefertigte Klassenbibliothek wie MooTools oder jQuery/dojo, um dies zu erreichen.
Wenn sich im obigen Beispiel das neue Fenster normal öffnet, können wir eine Nachricht über die Fensterobjektreferenz myPopup senden und den URI (Protokoll, Hostname, Portnummer) angeben, der übereinstimmen muss (wenn der Benutzer in das untergeordnete Fenster springt). Fenster zu anderen Seiten, die Nachricht wird nicht gesendet).
In ähnlicher Weise haben wir auch die Event-Handler-Funktion an den Empfang der Nachricht gebunden. Zur Erinnerung: Es ist wichtig, das Ursprungsattribut des Nachrichtenereignisses zu überprüfen, da Nachrichten, die von allen URIs an Sie gesendet werden, empfangen werden können, sodass Sie bei der Interaktion mit mehreren Frames nicht verwirrt werden. Nach der Überprüfung des Ursprungs hängt der Umgang mit dieser Nachricht von Ihrem spezifischen Unternehmen und Ihren Anforderungen ab.

Wenn Sie iframe verwenden, lautet der Code wie folgt:

iframe.postMessage(message,domain); //Dateninformationen senden und Ziel-URI festlegen
},6*1000);


Stellen Sie sicher, dass Sie auf das contentWindow-Attribut des iframe-Objekts zugreifen können —— Und nicht nur das Iframe-Objekt.


2. Ende des Nachrichtenempfangs

Der zweite Schritt des gesamten Prozesses besteht darin, das Zielfenster vorzubereiten. Das Zielfenster muss lediglich das Nachrichtenereignis abhören und natürlich die Ursprungsnachrichtenquelle des Ereignisses überprüfen. Nochmals zur Erinnerung: Der Nachrichtenereignishandler kann Nachrichten akzeptieren, die von jedem Domänennamen an ihn gesendet werden. Daher ist es sehr wichtig, den Ursprung zu überprüfen und nur Nachrichten aus der Vertrauensliste zu verarbeiten.

// Überwachen Sie die empfangenen Informationen
bindEvent(window,'message',function(event) {
// Empfangen Sie nur Nachrichten von bestimmten Domänen
if(event.origin !== 'http://davidwalsh.name') return;
trace('Listened to information: ',event.data);
//Antwortnachricht
event .source .postMessage(""Hallo Freunde, ich habe die Nachricht erhalten, event.origin);
},false);