recherche

Maison  >  Questions et réponses  >  le corps du texte

Ouvrir les liens dans l'iframe un par un lorsque le bouton est enfoncé

<p>J'ai un tableau avec trois liens pour un bouton utilisé dans le pied de page et lorsque j'appuie encore et encore sur le bouton, le tableau fonctionne correctement un par un. . Et un bouton de lien apparaîtra à chaque fois que vous appuierez sur celui-ci. C'est très bien. Mais je veux, lorsque je clique sur le bouton, <em> que le "lien" s'ouvre dans un "iframe" </em>. . . J'ai utilisé du code iframe pour leur transmettre l'identifiant du bouton src= mais cela ne fonctionne pas. . Veuillez fournir le code ci-dessous et aider. . . Mon code de bouton avec array</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html> <tête> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> . bas de page { poste : fixe ; gauche : 0 ; bas : 0 ; largeur : 100 % ; couleur de fond : rouge ; Couleur blanche; alignement du texte : centre ; } </style> <script> laissez lien = nouveau tableau() lien[0] = "https://www. clc-uk. org. Royaume-Uni/cms/cms. jsp?menu_id=26131&postcode=AL3+8QE&distance=20" lien[1] = "https://www. clc-uk. org. Royaume-Uni/cms/cms. jsp?menu_id=26131&postcode=AL5+3NG&distance=20" lien[2] = "https://www. clc-uk. org. Royaume-Uni/cms/cms. jsp?menu_id=26131&postcode=AL4+3NS&distance=20" laissez intlinkIndex = 0; fonction writeLink() { if (intlinkIndex >= lien.longueur) { soit btn = document. getElementById('btn'); btn. style. display = 'aucun'; mon lien. style. display = 'aucun'; } document. getElementById('monlien'). innerHTML = '<a href="' + lien[intlinkIndex] + '">' + lien[intlinkIndex] + '</a>'; intlinkIndex++; } </script> ≪/tête> <corps> <div class="pied de page"> <id du bouton="btn" onclick="writeLink();">Cliquez sur moi</bouton> <div id="monlien"></div> <br> <iframe id="iframe" src="monlien" largeur="100%" hauteur="400"></iframe> </div> </corps> </html></pre></p>
P粉949848849P粉949848849458 Il y a quelques jours668

répondre à tous(1)je répondrai

  • P粉579008412

    P粉5790084122023-09-04 10:54:39

    Lors de la génération du HTML du lien, vous pouvez l'obtenir en spécifiant le nom de l'iframe dans target.

    Alors ajoutez un attribut name à votre iframe comme ceci : 

    <iframe id="iframe" name="iframe" src="mylink" width="100%" height="400"></iframe>

    Ajoutez ensuite un attribut target. 

    document.getElementById('mylink').innerHTML = '<a href="' + link[intlinkIndex] + '" target="iframe">' + link[intlinkIndex] + '</a>';
    function writeLink() {
    if (intlinkIndex >= link.length) {
      let btn = document.getElementById('btn');
      btn.style.display = 'none';
      mylink.style.display = 'none';
    }
    document.getElementById('mylink').innerHTML = '<a href="' + link[intlinkIndex] + '">' + link[intlinkIndex] + '</a>';
    document.getElementById('iframe').src = link[intlinkIndex];
    intlinkIndex++;
  }

    Code source complet

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>

<script>
let link = new Array()
link[0] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL3+8QE&distance=20"
link[1] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL5+3NG&distance=20"
link[2] = "https://www.clc-uk.org.uk/cms/cms.jsp?menu_id=26131&postcode=AL4+3NS&distance=20"

let intlinkIndex = 0;

function writeLink() {
  if (intlinkIndex >= link.length) {
    let btn = document.getElementById('btn');
    btn.style.display = 'none';
    mylink.style.display = 'none';
  }
    document.getElementById('mylink').innerHTML = '<a href="' + link[intlinkIndex] + '">' + link[intlinkIndex] + '</a>';
    document.getElementById('iframe').src = link[intlinkIndex];
    intlinkIndex++;
}
</script>





</head>
<body>



<div class="footer"> 

<button id="btn" onclick="writeLink();">Click Me</button>

<div id="mylink"></div>

<br>


<iframe id="iframe" src="mylink" width="100%" height="400"></iframe>

</div>

</body>
</html>

    répondre
    0
  • Annulerrépondre