简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
按下按鈕時，逐一在iframe中開啟鏈接
P粉949848849
P粉949848849 2023-09-03 15:44:43
0
1
645
<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>
P粉949848849
P粉949848849

全部回覆(1)
P粉579008412
P粉5790084122023-09-04 10:54:39 1樓

在產生連結的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>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！