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

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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;

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

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é :-°

La curiosité est le plus beau des défauts

+0 -0
Auteur du sujet

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é :/

Édité par Dark Patate

La curiosité est le plus beau des défauts

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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