按下按钮时，逐个在iframe中打开链接
P粉949848849
2023-09-03 15:44:43
<p>我有一个包含三个链接的数组，用于在页脚中使用的按钮，当我一次又一次按下该按钮时，数组将一一正常工作。。并且每次按下时都会显示一个链接按钮。那很好。
但我想，当我点击按钮时，<em>“链接”应该在“iframe”中打开</em> 。。。我使用 iframe 代码向它们传递 src= 按钮 id 但不起作用。。请在下面的代码和帮助。。
。
我的带有数组的按钮代码</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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
在生成链接的HTML时，可以通过在
target中指定iframe的名称来获取它。所以在你的iframe中添加一个
name属性，如下所示：然后添加一个
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++; }完整源代码
<!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>