Comentario: Este artículo proporciona un resumen detallado del uso del postmessage en la comunicación de dominio cruzado HTML5. Los amigos que lo necesitan pueden venir y referirse a él. Espero que sea útil para todos.
PostMessagePortal.html Código de página
<! Doctype html>
<title> title </title>
<link href = "styles.css">
<link href = "http://apress.com/favicon.ico">
<script> </p> <p> var Targetorigin = "http://22527.vhost20.boxcdn.cn"; </p> <p> var defaulttitle = "portal";
var notificationTimer = null; </p> <p> Función MessageHandler (E) {
if (e.origin == Targetorigin) {
notificar (e.data);
} demás {
// Ignorar mensajes de otros orígenes
}
} </p> <p> función sendString (s) {
document.getElementById ("Widget"). ContentWindow.PostMessage (S, TargetOrigin);
} </p> <p>
función notificar (mensaje) {
parada de parpadeo ();
Blinktitle (mensaje, defaultTitle);
} </p> <p> Función Stopblinking () {
if (NotificationTimer! == NULL) {
ClearTimeOut (NotificationTimer);
}
document.title = defaultTitle;
} </p> <p> Función Blinktitle (M1, M2) {
document.title = m1;
NotificationTimer = setTimeout (Blinktitle, 1000, M2, M1)
} </p> <p> función sendStatus () {
var StatusText = document.getElementById ("StatusSext"). Value;
sendString (StatusText);
} </p> <p> función loadDemo () {
document.getElementById ("SendButton"). AddEventListener ("Haga clic", SendStatus, True);
document.getElementById ("stopButton"). AddEventListener ("Haga clic", Stopblinking, True);
sendStatus ();
}
Window.AdDeventListener ("Load", LoadDemo, True);
Window.adDeventListener ("Mensaje", MessageHandler, True); </p> <p> </script> </p> <p> <h1> Comunicación de dominio cruzado </h1>
Información de transmisión: <input type = "text" value = "en línea">
<botón> confirmar </boton>
<iframe src = "http://22527.vhost20.boxcdn.cn/postmessagewidget.html"> </iframe>
<p>
<botón> Detenga el título Flashing </Button>
</p>
El código de PostMessageWidget.html Página
<! Doctype html>
<title> title </title>
<link href = "styles.css">
<script> </p> <p> var Targetorigin = "http://www.weixiu0376.cn"; </p> <p> // todo Whitelist Array </p> <p> MessageHandler (E) {
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById ("estado"). TextContent = E.Data;
} demás {
// Ignorar mensajes de otros orígenes
}
} </p> <p> función sendString (s) {
Window.top.PostMessage (S, Targetorigin);
} </p> <p> función loadDemo () {
document.getElementById ("ActionButton"). AddEventListener ("Click",
función() {
var messageText = document.getElementById ("MessageText"). Valor;
sendString (MessageText);
}, verdadero); </p> <p>}
Window.AdDeventListener ("Load", LoadDemo, True);
Window.adDeventListener ("Mensaje", MessageHandler, True); </p> <p> </script>
<p> Mostrar información de recepción: <strong> </strong> <p>
<div>
<input type = "text" valor = "rellenar el contenido del mensaje">
<botón> Enviar un mensaje </boton>
</div>