Commentaire: Cet article fournit un résumé détaillé de l'utilisation du postmessage dans la communication interdomaine HTML5. Les amis qui en ont besoin peuvent venir y faire référence. J'espère que ce sera utile à tout le monde.
Code de page postMessageportal.html
<! 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> fonction messageHandler (e) {
if (e.origin == Targetorigin) {
notifier (e.data);
} autre {
// ignorer les messages d'autres origines
}
} </p> <p> Fonction SendString (S) {
document.getElementById ("widget"). ContentWindow.PostMessage (S, Targetorigin);
} </p> <p>
fonction notify (message) {
stopbinking ();
blinkTitle (message, defaultTitle);
} </p> <p> fonction stopbinking () {
if (notificationTimer! == null) {
ClearTimeout (NotificationTimer);
}
document.Title = defaultTitle;
} </p> <p> fonction blinktitle (m1, m2) {
document.title = m1;
notificationTimer = setTimeout (blinktitle, 1000, m2, m1)
} </p> <p> Fonction SendStatus () {
var statustext = document.getElementById ("StatusTExt"). Valeur;
SendString (StateStext);
} </p> <p> Fonction LoadDemo () {
document.getElementById ("SendButton"). AddEventListener ("Click", SendStatus, true);
document.getElementById ("stopbutton"). AddEventListener ("cliquez", stopbsinking, true);
sendStatus ();
}
Window.AddeventListener ("Load", LoadDemo, True);
window.addeventListener ("message", messagehandler, true); </p> <p> </cript> </p> <p> <h1> Communication inter-domaine </h1>
Transmettre des informations: <entrée type = "text" value = "en ligne">
<froit> Confirmer </ftones>
<iframe src = "http://22527.vhost20.boxcdn.cn/postMessageWidget.html"> </ iframe>
<p>
<froit> Arrêtez le title clignotant </fontificateur>
</p>
Le code de la page PostMessageWidget.html
<! 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> function MessageHandler (e) {
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById ("Status"). TextContent = E.Data;
} autre {
// ignorer les messages d'autres origines
}
} </p> <p> Fonction SendString (S) {
window.top.postMessage (S, Targetorigin);
} </p> <p> Fonction LoadDemo () {
document.getElementById ("ActionButton"). AddEventListener ("Click",
fonction() {
var MessageText = document.getElementById ("MessageText"). Valeur;
SendString (MessageText);
}, true); </p> <p>}
Window.AddeventListener ("Load", LoadDemo, True);
window.addeventListener ("message", messagehandler, true); </p> <p> </cript>
<p> Afficher les informations de réception: <strong> </strong> <p>
<div>
<input type = "text" value = "remplir le contenu du message">
<froit> Envoyez un message </fruton>
</div>