postMessage() : Démo HTML5
Mise à jour : 2017-01-22
Cette fonctionnalité permet de transmettre des objets sérialisables
entre différentes pages web qui peuvent être sur différents domaines.
Un contrôle peut être effectué sur l'origine d'un message envoyé.
postMessage(msg, target)
- msg : le message à envoyer
- target : la page qui recevra le message au travers d'un évènement
- message : l'évènement envoyé avec 2 attributs :
- origin : indique l'origine de l'évènement (adresse du site)
- data : contient le message envoyé
Notes sur le tuto
- La page cible (target) qui reçoit l'évènement peut être sur un autre site.
- Dans tous les cas l'URL de la "target" doit être absolue.
Exemple de code HTML5
Entrez votre nom : <input type=text onkeyup="update(value)"/><br>
<br>
<iframe src="http://html5demo.yo.fr/demo/_postMessage.php" id="postMessage"></iframe>
<script>
function update(name) {
frames[0].postMessage(name,
"http://html5demo.yo.fr/demo/_postMessage.html");
}
</script>
Démonstration du résultat HTML5
Entrez votre nom :
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
<script src="_html5detect.js"></script>
<script>isItemSupported("window.postMessage", true)</script>