按下按鈕時一個一個打開iframe中的鏈接

Question

我有一個三個鏈接的數組，用於我在頁腳中使用的按鈕，當我一次又一次地按下按鈕時，數組將一個接一個地工作..每次按下按鈕時它都會顯示一個鏈接。 那很好。 但我想，當我點擊按鈕時， “鏈接”應該在“iframe”中打開......我使用 iframe 代碼向它們傳遞 src=按鈕 id 但不工作..請在下面的代碼和幫助..。 我的帶有數組的按鈕代碼

<!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>

Answer 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>

按下按鈕時一個一個打開iframe中的鏈接

問題描述

1 個解決方案

解決方案1
0 已采納 2022-04-12 12:20:19

按下按鈕時一個一個打開iframe中的鏈接

問題描述

1 個解決方案

解決方案1 0 已采納 2022-04-12 12:20:19

解決方案1
0 已采納 2022-04-12 12:20:19