Öffnen Sie Links im Iframe nacheinander, wenn Sie auf die Schaltfläche klicken
P粉949848849
2023-09-03 15:44:43
<p>Ich habe ein Array mit drei Links für eine Schaltfläche, die in der Fußzeile verwendet wird, und wenn ich die Schaltfläche immer wieder drücke, funktioniert das Array nacheinander einwandfrei. . Und jedes Mal, wenn Sie darauf klicken, wird eine Link-Schaltfläche angezeigt. Das ist in Ordnung.
Aber ich möchte, dass, wenn ich auf die Schaltfläche <em> klicke, der „Link“ in einem „iframe“</em> geöffnet wird. . . Ich habe Iframe-Code verwendet, um ihnen die Schaltflächen-ID src= zu übergeben, aber es funktioniert nicht. . Bitte geben Sie den untenstehenden Code ein und helfen Sie. .
.
Mein Button-Code mit Array</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<Kopf>
<meta name="viewport" content="width=device-width, initial-scale=1">
<Stil>
. Fusszeile {
Position: fest;
links: 0;
unten: 0;
Breite: 100 %;
Hintergrundfarbe: rot;
Farbe weiß;
Textausrichtung: Mitte;
}
</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"
sei intlinkIndex = 0;
Funktion writeLink() {
if (intlinkIndex >= link. length) {
let btn = document. getElementById('btn');
btn. Stil. display = 'none';
meine Verbindung. Stil. display = 'none';
}
dokumentieren. getElementById('mylink'). innerHTML = '<a href="' + link[intlinkIndex] + '">' + link[intlinkIndex] + '</a>';
intlinkIndex++;
}
</script>
</head>
<Körper>
<div class="footer">
<button id="btn" onclick="writeLink();">Click Me</button>
<div id="mylink"></div>
<br>
<iframe id="iframe" width="100%"></iframe>
</div>
</body>
</html></pre></p>
在生成链接的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>