Tengo una matriz de tres enlaces para un botón que estoy usando en el pie de página y cuando presiono el botón una y otra vez, la matriz funcionará bien una por una... y cada vez que muestre un enlace cuando presione el botón. Está bien. pero quiero, cuando hago clic en el botón, ese "enlace" debería abrirse en "iframe" ... utilicé el código iframe para pasarles src= ID de botón pero no funciona... por favor debajo del código y ayuda... mi código de botón con matriz
<!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>Puede obtenerlo especificando el nombre del iframe en el target al generar el enlace html.
Así que agregue una propiedad de name en su iframe como la siguiente:
<iframe id="iframe" name="iframe" src="mylink" width="100%" height="400"></iframe> A continuación, agregue una propiedad de 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++; }código fuente completo
<!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>