javascript - 如何在选择列表项时重新加载 iframe

Question

我的jsp页面

  <ul class="nav nav-pills nav-stacked" id="myTab">
    <li class="active"><a data-toggle="tab" href="#section1">frame1</a></li>
    <li><a href="#section2">frame2</a></li>
    <li><a href="#section3">frame3</a></li>   
  </ul>


    <div id="section1" class="tab-pane fade in active">
         <iframe src="./abc" style="border:none" height="1500" width="100%"></iframe>   
    </div>
    <div id="section2" class="tab-pane fade">
         <iframe src="./def" style="border:none" height="1500" width="100%"></iframe>
    </div>
    <div id="section3" class="tab-pane fade">
         <iframe src="./efg" style="border:none" height="1500" width="100%"></iframe>
    </div>

我定义了三个 iframe。我想在选择列表项时重新加载 iframe。

Answer 1

我添加了<script>标记(下面的内容)到正文的末尾，该正文监听列表中 anchor 元素的点击，遵循其 href 属性，并通过将其 src 属性设置为自身来重新加载该元素中的 iframe。

// Select the parent element of the list items
var myTab = document.getElementById("myTab");
// Listen for clicks
myTab.addEventListener("click",function(event){
  // If the user clicked on an anchor
  if(event.target.nodeName === "A"){
    // Get the iframe which is the first element child of the anchor destination
    var iframe = document.getElementById(event.target.getAttribute("href").substr(1)).firstElementChild;
    // Reload it
    iframe.src = iframe.src;
  }
});

<ul class="nav nav-pills nav-stacked" id="myTab">
  <li class="active"><a data-toggle="tab" href="#section1">frame1</a>
  </li>
  <li><a href="#section2">frame2</a>
  </li>
  <li><a href="#section3">frame3</a>
  </li>
</ul>


<div id="section1" class="tab-pane fade in active">
  <iframe src="data:text/html,1<script>setInterval(function(){document.body.textContent = parseInt(document.body.textContent) + 1},1000)</script>" style="border:none" height="50" width="100%"></iframe>
</div>
<div id="section2" class="tab-pane fade">
  <iframe src="data:text/html,1<script>setInterval(function(){document.body.textContent = parseInt(document.body.textContent) + 1},1000)</script>" style="border:none" height="50" width="100%"></iframe>
</div>
<div id="section3" class="tab-pane fade">
  <iframe src="data:text/html,1<script>setInterval(function(){document.body.textContent = parseInt(document.body.textContent) + 1},1000)</script>" style="border:none" height="50" width="100%"></iframe>
</div>