Question

我正在使用导航标签导航，我有3个标签，每个标签显示显示页面的iframe。我注意到与每个标签相关的三个页面只更新了一次（第一次访问主页面）。稍后当我从标签移动到另一个标签时，标签不会更新。我希望一旦选项卡变为clike，就会更新iframe中显示的页面，因为它从数据库读取数据并且我需要它是最新的。

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
  <iframe src="Page1.aspx" style="width:100%; height:850px ; border:none";  id="frame1"></iframe>
</div>
<div id="menu1" class="tab-pane fade">
    <iframe src="Page2.aspx" style="width:100%; height:850px ; border:none";  id="frame2"></iframe>
</div>
<div id="menu2" class="tab-pane fade">
   <iframe src="Page3.aspx" style="width:100%; height:850px ; border:none";  id="frame3"></iframe>
</div>

我该怎么做？

Answer 1

function refresh(val){
  document.getElementById( '#' + val).contentWindow.location.reload();
}

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
  <iframe src="Page1.aspx" style="width:100%; height:850px ; border:none";  id="frame1" onclick="refresh('frame1')"></iframe>
</div>
<div id="menu1" class="tab-pane fade">
    <iframe src="Page2.aspx" style="width:100%; height:850px ; border:none";  id="frame2" 
    onclick="refresh('frame1')"></iframe>
</div>
<div id="menu2" class="tab-pane fade">
   <iframe src="Page3.aspx" style="width:100%; height:850px ; border:none";  id="frame3" onclick="refresh('frame1')"></iframe>
</div>

点击通话刷新功能并传递ID。 //此语句将刷新Iframe。的document.getElementById（ 'some_frame_id'）contentWindow.location.reload（）;

仅刷新包含iframe的bootstrap中的当前导航选项卡

1 个答案: