Comentário: Este artigo fornece um resumo detalhado do uso da pós-maquiagem na comunicação de domínio cruzado HTML5. Amigos que precisam podem vir e se referir a ele. Espero que seja útil para todos.
Código de página PostMessagePortal.html
<! Doctype html>
<title> título </title>
<link href = "styles.css">
<link href = "http://apress.com/favicon.ico">
<cript> </p> <p> var Targetorigin = "http://22527.vhost20.boxcdn.cn"; </p> <p> var defaultTitle = "Portal";
var notificationtimer = null; </p> <p> função messageHandler (e) {
if (e.origin == Targetorigin) {
notificar (e.datos);
} outro {
// ignora as mensagens de outras origens
}
} </p> <p> função sendstring (s) {
document.getElementById ("widget"). ContentWindow.postMessage (S, Targetorigin);
} </p> <p>
function notify (mensagem) {
parar de piscar ();
piscawtitle (mensagem, defaultTitle);
} </p> <p> função pare de piscar () {
if (notificationtimer! == null) {
ClearTimeout (notificaçãotimer);
}
document.title = defaultTitle;
} </p> <p> função piscans (m1, m2) {
document.title = m1;
notificationtimer = setTimeout (Blinktitle, 1000, M2, M1)
} </p> <p> função sendStatus () {
var statustext = document.getElementById ("statustext").
sendString (statustext);
} </p> <p> função loadDemo () {
Document.getElementById ("SendButton"). AddEventListener ("Clique", SendStatus, True);
document.getElementById ("StopButton"). AddEventListener ("Clique", pare de piscar, verdadeiro);
sendStatus ();
}
window.addeventListener ("load", loaddemo, true);
window.addeventListener ("message", MessageHandler, true); </p> <p> </script> </p> <p> <h1> comunicação de domínio cruzado </h1>
Informações de transmissão: <input type = "text" value = "online">
<but uma botão> Confirme </botão>
<iframe src = "http://22527.vhost20.boxcdn.cn/postMessagewidget.html"> </frame>
<p>
<butter> Pare o título piscando </botão>
</p>
O código da página PostMessageWidget.html
<! Doctype html>
<title> título </title>
<link href = "styles.css">
<cript> </p> <p> var Targetorigin = "http://www.weixiu0376.cn"; </p> <p> // TODO WHITELIST ARRAY </p> <p> function MessageHandler (e) {
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById ("status"). TextContent = e.data;
} outro {
// ignora as mensagens de outras origens
}
} </p> <p> função sendstring (s) {
window.top.postMessage (S, Targetorigin);
} </p> <p> função loadDemo () {
Document.getElementById ("ActionButton"). AddEventListener ("Clique",
function () {
var messageText = document.getElementById ("messageText").
sendString (MessageText);
}, true); </p> <p>}
window.addeventListener ("load", loaddemo, true);
window.adDeventListener ("Message", MessageHandler, True); </p> <p> </script>
<p> Mostre informações de recepção: <strong> </strong> <p>
<div>
<input type = "text" value = "preencha o conteúdo da mensagem">
<but uma botão> Envie uma mensagem </botão>
</div>