J'ai acheté l'excellent livre de R.Rimelé sur le HTML 5. Je n'ai pas pu par contre faire fonctionner les exemples fournis au chapitre Web Messaging, ni avec Chrome ni avec Firefox(a jour tous les deux).
J'avoue que la syntaxe me déroute un peu, il est question de "http://www.domaine1.com", je me demande d'ou ça sort. Bref pour ceux qui n'auraient pas l'ouvrage voici le code:
simple-emetteur.html
simple-destinataire.html
Il est à noter que le src de l'iframe renvoie à un site existant(probablement chinois).
Ma question est : est-ce que cet exemple fonctionne ou y a t'il quelque chose de plus à faire pour le faire fonctionner.
Par avance, merci de vos réponses.
J'avoue que la syntaxe me déroute un peu, il est question de "http://www.domaine1.com", je me demande d'ou ça sort. Bref pour ceux qui n'auraient pas l'ouvrage voici le code:
simple-emetteur.html
<!doctype html>
<html lang="fr">
<head>
<title>HTML5 : Web Messaging</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="wrap">
<p>Je suis sur www.domaine1.com</p>
<form id="envoi">
<p><textarea id="message"></textarea></p>
<p><input type="submit" value="Envoyer"></p>
</form>
<iframe src="http://www.domaine2.com/web-messaging/simple-destinataire.html" id="iframe"></iframe>
</div>
<script>
// Mémorisation de la fenêtre destination dans une variable
var destination = document.getElementById('iframe').contentWindow;
// Redéfinition de la validation du formulaire
document.getElementById('envoi').onsubmit = function(e) {
// Mémorisation du texte dans une variable
var texte = document.getElementById('message').value;
console.log(texte);
// Envoi de la variable à la fenêtre destination
destination.postMessage(texte,"http://www.domaine2.com");
e.preventDefault();
};
</script>
</body>
</html>simple-destinataire.html
<!doctype html>
<html lang="fr">
<head>
<title>HTML5 : Web Messaging</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<p>Je suis sur www.domaine2.com!</p>
<ul id="messages"></ul>
<script>
// Gestionnaire d'événement 'message'
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', reception, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', reception);
}
// Traitement de l'événement
function reception(e)
{
// Vérification de l'origine
if(e.origin!=='http://www.domaine1.com') {
alert("Mauvaise origine");
} else {
// Prise en compte du message
var li = document.createElement('li');
li.textContent = e.origin +' a dit : '+e.data;
document.getElementById('messages').appendChild(li);
}
}
</script>
</body>
</html>Il est à noter que le src de l'iframe renvoie à un site existant(probablement chinois).
Ma question est : est-ce que cet exemple fonctionne ou y a t'il quelque chose de plus à faire pour le faire fonctionner.
Par avance, merci de vos réponses.