Aujourd’hui je vais vous parler d’une chose sur lequel j’ai butté une journée entière. Voici ce que je devais réaliser :
Envoyer des infos en arrière plan dans le localStorage du domaine B depuis le domaine A
Si vous ne le savez pas, les navigateurs ont un localstorage de 5Mo (10Mo pour certains navigateurs) par Domaine. De plus, vu que le localstorage est côté navigateur, nous devrons le manipuler avec du JavaScript. C’est pourquoi, la réponse logique (et après recherche) reste donc l’utilisation des IFrames. Le souci, c’est que maintenant, les navigateurs modernes ne permettent plus la manipulation des IFrames si son domaine est différent de la page source.
En cherchant un peu plus, je suis tombé sur la fonction PostMessage() introduite avec HTML5 permettant d’outrepasser cette limitation tout en gardant le côté sécurisé.
Justement, ce problème va nous permettre de voir plusieurs technologies propres à l’HTML5 :
- LocalStorage : Permet de stocker des valeurs au sein du navigateur sans limite de durée. Le LocalStorage est rattaché au domaine.
- PostMessage : Fonction propre aux IFrames permettant d’envoyer des événements depuis la page parente. Fonctionne si l’Iframe est dans un domaine différent.
Nous allons voir chacune des deux parties avec le code à implémenter.
Domaine A
Dans le domaine A, nous allons voir 2 parties. La vue HTML avec la mise en place de l’IFRame (c’est tout bête mais il y a un petit détail important), puis la partie Javascript avec l’utilisation de PostMessage.
Vue HTML
<html>
<head>
...
</head>
<body>
...
<iframe src="http://mondomaineb/foo.html" frameborder="0" style="display: none;" id="postmessage"></iframe>
<body>
</html>
Partie Javascript
//...
//le [0] sert à récupérer l'objet DOM
var iframe = $("#postmessage")[0].contentWindow;
iframe.postMessage({
foo : 'value1',
bar : 'value2'
}, "*");
//...
Domaine B
Dans le Domaine B, seule la partie Javascript va être necessaire. Néanmoins, si vous devez communiquer un retour avec le domaine A, vous devriez encore repasser par une IFrame. Mais ceci ne concerne pas cet exemple.
Il faut savoir que, pour pouvoir capturer un événement postMessage, nous devons ajouter un Listener sur l’événement message. Si vous oubliez cette partie, votre postMessage communiquera avec un mur. De plus, la fonction lancée par ce Listener n’a qu’un seul paramètre : Le paramètre event. Grâce à lui, vous pouvez connaître l’origine du message et ainsi le traiter uniquement s’il vient du Domaine A.
//...
function postMessageB(evt){
if(
evt.origin === 'http://mondomaineA'
){
var foo = evt.data.foo;
var bar = evt.ata.bar;
// affichera dans votre navigateur le message "value1 value2" depuis l'iframe.
alert(foor+" "+bar);
}else{
return;
}
}
window.addEventListener("message", postMessageB, false);
//...
Conclusion
Voilà. Normalement, vous savez dorénavant utiliser postMessage. Si vous avez des questions, des soucis ou que vous souhaitez aussi me corriger, n’hésitez pas à me laisser un commentaire. Sur ce, bon week-end à tous.
