Home  >  Q&A  >  body text

Open links in iframe one by one when button is pressed

<p>I have an array with three links for a button used in the footer and when I press the button again and again the array works fine one by one. . And a link button will appear every time it is pressed. That's fine. But I want, when I click the button, <em> the "link" should open in an "iframe"</em>. . . I used iframe code to pass them src= button id but it doesn't work. . Please provide the code below and help. . . My button code with array</p> <pre class="brush:php;toolbar:false;"><!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>'; 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></pre></p>
P粉949848849P粉949848849385 days ago610

reply all(1)I'll reply

  • P粉579008412

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

    When generating the link's HTML, you can obtain it by specifying the name of the iframe in target.

    So add a name attribute to your iframe like this:

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

    Then add a target attribute.

    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++;
      }

    Complete source code

    <!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>

    reply
    0
  • Cancelreply