时间戳

首页 > 解决方案 > 使用javascript单击相关选项卡时如何刷新iframe？

javascript - 使用javascript单击相关选项卡时如何刷新iframe？

问题描述

我在带有 3 个选项卡的索引文件中使用三个 iframe。选择每个选项卡时，我想加载或刷新 iframe 中的文件。

这是我的索引文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#home" data-toggle="tab">Enter</a></li>
  <li><a data-target="#profile" data-toggle="tab" >Display</a></li>
  <li><a data-target="#messages" data-toggle="tab">Search</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">
    <iframe src="EnterBook.php"  ></iframe> 
  </div>
  <div class="tab-pane" id="profile" >
    <iframe src="DisplayBooks.php"  ></iframe>
  </div>
  <div class="tab-pane" id="messages">
    <iframe src="SearchBooks.php"  ></iframe>   
  </div>      
</div>

我确实查看了其他解决方案，但没有任何帮助。请任何人都可以查看它。

标签： javascripthtmliframe

解决方案

您需要向click每个选项卡添加事件处理程序，并在回调函数中获取单击选项卡的相关 iframe 并更改src其重置属性或使用Location.reload() 

document.querySelectorAll('#myTab a').forEach(function(ele){
  ele.onclick = function(){
    var iframe = document.querySelector(this.dataset.target+'>iframe');
    iframe.src = iframe.src;
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
  <li class="active">
    <a data-target="#home" data-toggle="tab">Enter</a>
  </li>
  <li>
    <a data-target="#profile" data-toggle="tab" >Display</a>
  </li>
  <li>
    <a data-target="#messages" data-toggle="tab">Search</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">
    <iframe src="https://stacksnippets.net/"></iframe> 
  </div>
  <div class="tab-pane" id="profile">
    <iframe src="https://stacksnippets.net/"></iframe>
  </div>
  <div class="tab-pane" id="messages">
    <iframe src="https://stacksnippets.net"></iframe>   
  </div>      
</div>

推荐阅读