Liaison entre une page mère et une page fille dans un iframe

Le problème exposé dans ce sujet a été résolu.

Bonjour,
j'ai réalisé un système d'onglet avec Javacript. À chaque fois que je change d'onglet, le JS charge une nouvelle page dans un iframe. Je voulais savoir s'il était possible de faire en sorte, en JS, qu'un clique ou une action sur la page de l'iframe ait un impact sur la page mère ?

Merci d'avance ! :-)

Pour les codes, voici le système d'onglet (page mère) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="messagerie-button-box"><button class="mui-btn mui-btn-raised mui-btn-primary" >Nouveau message</button></div>

<div id="tabs">
    <ul class="mui-tabs">
        <li><a href="javascript:void(0)" rel="messagerie-reception" onClick="loadit(this)">Boîte de réception</a></li> 
        <li><a href="javascript:void(0)" rel="equipe" onClick="loadit(this)">Boîte d'envoi</a></li>
        <li><a href="javascript:void(0)" rel="https://zestedesavoir.com" onClick="loadit(this)">Corbeille</a></li>  
    </ul>
</div>

<iframe id="container"></iframe>

et voici le JS :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function loadit( element)
{
    var container = document.getElementById('container');
    container.src=element.rel;

    var tabs=document.getElementById('tabs').getElementsByTagName("a");
    var tabsLi=document.getElementById('tabs').getElementsByTagName("li");
    for (var i=0; i < tabs.length; i++)
    {
        if(tabs[i].rel == element.rel) 
            tabsLi[i].className="mui-active";
        else
            tabsLi[i].className="";
    }
}

function startit()
{
    var tabs=document.getElementById('tabs').getElementsByTagName("a");
    var container = document.getElementById('container');
    container.src = tabs[0].rel;

    var tabsLi=document.getElementById('tabs').getElementsByTagName("li");
    tabsLi[0].className="mui-active";;
}

window.onload=startit;
+0 -0

Ok, merci, je vais regarder ça demain et vous dirais les résultats :-)

Dans tous les cas il faudra que l'iframe t'appartienne vu que c'est à elle d'envoyer des messages au parent.

Je pense que tu dis ça à cause du lien vers Zeste de savoir :p C'est juste que pour mes tests j'avais besoin de trois liens et que j'avais pas encore fait toutes mes pages alors j'ai pris le premier lien que j'ai trouvé :-°

+0 -0

Bonne idée ! Dans la page affichée dans l'iframe, voici le code JS :

1
2
3
4
function selection(id)
{
    window.top.postMessage(id,"http://localhost");
}

et celui de la page mère

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var listener = (function() {

    return function(event) {
        if (event.origin !== "http://localhost" )
            return;

        // code
    };
})();



if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}

J'ai une fonction listener bizarre pcq j'avais besoin d'une variable statique dans mon cas.

Je me pose aussi une question, y a t'il un moyen d'obtenir dynamiquement l'adresse du domaine du site ? Pcq l'écrire en dur c'est moyen pour la portabilité :/

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte