简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Buka pautan dalam iframe satu demi satu apabila butang ditekan
P粉949848849
P粉949848849 2023-09-03 15:44:43
0
1
604
<p>Saya mempunyai tatasusunan dengan tiga pautan untuk butang yang digunakan dalam pengaki dan apabila saya menekan butang itu sekali lagi tatasusunan itu berfungsi dengan baik satu demi satu. . Dan butang pautan akan muncul setiap kali ia ditekan. tak apa. Tetapi saya mahu, apabila saya mengklik butang, <em> "pautan" harus dibuka dalam "iframe"</em>. . . Saya menggunakan kod iframe untuk menghantarnya src= button id tetapi ia tidak berfungsi. . Sila berikan kod di bawah dan bantu. . . Kod butang saya dengan tatasusunan</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html> <kepala> <meta name="viewport" content="width=device-width, initial-scale=1"> <gaya> . pengaki { kedudukan: tetap; kiri: 0; bawah: 0; lebar: 100%; warna latar belakang: merah; warna: putih; text-align: tengah; } </style> <skrip> biarkan pautan = new Array() pautan[0] = "https://www. clc-uk. org. uk/cms/cms. jsp?menu_id=26131&poskod=AL3+8QE&jarak=20" pautan[1] = "https://www. clc-uk. org. uk/cms/cms. jsp?menu_id=26131&poskod=AL5+3NG&jarak=20" pautan[2] = "https://www. clc-uk. org. uk/cms/cms. jsp?menu_id=26131&poskod=AL4+3NS&jarak=20" biarkan intlinkIndex = 0; function writeLink() { if (intlinkIndex >= link.length) { biarkan btn = dokumen. getElementById('btn'); btn. gaya. paparan = 'tiada'; pautan saya. gaya. paparan = 'tiada'; } dokumen. getElementById('pautan saya'). innerHTML = '<a href="' + pautan[intlinkIndex] + '">' + pautan[intlinkIndex] + '</a>'; intlinkIndex++; } </skrip> </head> <badan> <div class="footer"> <button id="btn" onclick="writeLink();">Klik Saya</button> <div id="pautan saya"></div> <br> <iframe id="iframe" src="mylink"lebar="100%" </div> </badan> </html></pre></p>
P粉949848849
P粉949848849

membalas semua(1)
P粉579008412
P粉5790084122023-09-04 10:54:39 Tingkat 1

Apabila menjana HTML pautan, anda boleh mendapatkannya dengan menyatakan nama iframe dalam target.

Jadi tambahkan atribut name pada iframe anda seperti ini: 

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

Kemudian tambah atribut 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++;
  }

Kod sumber penuh

<!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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！