简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Öffnen Sie Links im Iframe nacheinander, wenn Sie auf die Schaltfläche klicken
P粉949848849
P粉949848849 2023-09-03 15:44:43
0
1
642
<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>
P粉949848849
P粉949848849

Antworte allen(1)
P粉579008412
P粉5790084122023-09-04 10:54:39 1 Etage

在生成链接的HTML时，可以通过在target中指定iframe的名称来获取它。

所以在你的iframe中添加一个name属性，如下所示：

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

然后添加一个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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！