Comment afficher des iframes dans un navbar dans une content page avec un événement clic à l’intérieur de l'iframe?

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
stephieker
Messages : 3
Enregistré le : 11 août 2020, 23:28

Comment afficher des iframes dans un navbar dans une content page avec un événement clic à l’intérieur de l'iframe?

Message par stephieker » 12 août 2020, 00:40

Bonjour,

SVP, je suis nouvelle sur ce forum et je sollicite de votre aide pour résoudre ce problème.
J'ai un bouton qui me permet de créer des iframes et de les ajouter dans une liste ordonnée dans un navbar.
Ensuite j'ai une fonction qui me permet de détecter l’événement clic à l’intérieur d'un Iframe et et de créer un autre iframe.

J'aimerai quand je clique sur l'un des iframe dans le navbar qu'il s'affiche dans le content page à droite ainsi je pourrais modifier le contenu de l'iframe.

J'ai essayé plusieurs fonction jquery qui me permet d'activer les éléments "ol et li" mais malheureusement ça ne fonctionne pas avec les iframes,
donc j'ai essayer avec une fonction javascript qui me permet de cliquer ou sélectionner un des iframes du navabar pour l'afficher à droite mais ça ne marche toujours pas.

Svp quelqu'un peut il me partager ses conseils ou de me suggérer une façon plus simple de le réaliser. J'ai pas mis tout mon code, donc si vous voulez plus d'information je suis disponible.
Je vous remercie par avance.

code du bouton pour la création des iframe dans le navbar

Code : Tout sélectionner

<button name="Add" onclick="createpage();" class="btn btn-primary"> Add Page</button>  
<div id="loadiframehere">

      <script type="text/javascript">
        // Fonction create new page
    var pagenum = 1;
    function createpage() {
    var newlink = document.createElement('a');
    newlink.setAttribute('class', 'list-group-item list-group-item-action bg-light');
    newlink.setAttribute('href', '');
    var listex = document.createElement("LI");
    var moniframe = document.createElement("IFRAME");
    moniframe.setAttribute("src","http://localhost:7007/page" + pagenum + "/");
    moniframe.setAttribute("width","150");
    moniframe.setAttribute("height","150");
    moniframe.setAttribute("id","page" + pagenum + "");    
    pagenum++;
    listex.appendChild(moniframe);
    newlink.appendChild(listex);
    document.getElementById("loadiframehere").appendChild(newlink);
    //alert(pagenum);
      
    }
      </script>
Fonction pour créer un autre iframe et l'ajouter dans la page

Code : Tout sélectionner

<script>
    var monitor = setInterval(function(){
        var elem = document.activeElement;
        if(elem && elem.tagName == 'IFRAME'){
            clearInterval(monitor);
             alert('clicked!');
    var moniframe1 = document.createElement("IFRAME");
    moniframe1.setAttribute("width","200");
    moniframe1.setAttribute("height","200");
      
    document.getElementById("loadiframe").appendChild(moniframe1);
           
        }
    });
    </script>  
Fichiers joints
Iframe_page2.PNG
Voici le visuel de mon travail.
Iframe_page2.PNG (17.82 Kio) Vu 1869 fois

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Comment afficher des iframes dans un navbar dans une content page avec un événement clic à l’intérieur de l'iframe?

Message par webmaster » 17 août 2020, 11:09

Bonjour,

La console indique une erreur dans le second script à la ligne
document.getElementById("loadiframe").appendChild(moniframe1);

Cannot read property 'appendChild' of null

Il doit manquer un morceau de HTML

L'idéal serait d'avoir une demo en ligne (car on ne voit pas le source du localhost)
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre