Faire du JavaScript Cross domain grâce à « postMessage »

Une fonctionnalité intéressante apportée par HTML5 est la fonction JavaScript postMessage(message, targetOrigin). Grâce à cette fonction, il est ainsi possible de communiquer facilement entre la page principale et la page contenue dans l’iframe située sur un domaine différent.

Page appelante

Nous déclarons dans notre page mère l’iframe avec la page appelée :

1
<iframe id="othersite" src="http://www.exemple.com/"></iframe>

Ensuite, nous devons ajouter notre code JavaScript pour recevoir les messages envoyées par l’iframe, comme ceci :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var handleMessage = function (e) {
    alert('test');
}
 
//IE
if (window.attachEvent) {
    window.attachEvent("onmessage", handleMessage);
}
 
//IE
if (document.attachEvent) {
    document.attachEvent("onmessage", handleMessage);
}
 
//firefox
if (window.addEventListener) {
    window.addEventListener("message", handleMessage, false);
}

Page appelée

Dans notre page qui est appelée, nous allons ajouter un bouton avec un événement « click ». Sur cet évènemment, nous envoyons notre message à notre page mère.

1
<button onclick="foo();">Hello</button>

On ajoute la déclaration de notre fonction JavaScript qui envoi ici un message disant tout simple « hello ».

1
2
3
4
function foo() {
    if(window.parent.postMessage)
        window.parent.postMessage('hello', '*'); 
}

En fonction du message, nous pourrons réaliser une action différente. Dans cette exemple, une alert simple est affichée.

Compatibilité des navigateurs

La fonction postMessage est disponible depuis Chrome, Safari 4, Firefox 3, et Internet Explorer 8.

Voir aussi

Il est possible de trouver les spécifications de la fonction dans les spécifications HTML5.

Merci à l’auteur de cet article.