只刷新bootstrap中包含iframe的当前导航选项卡
问题描述:
我使用导航选项卡进行引导,我有3个选项卡,每个选项卡显示显示页面的iframe。 我注意到与每个选项卡相关的三个页面只更新一次(首次访问主页面)。稍后当我从标签移动到另一个时,标签不会更新。我希望iframe中显示的页面一旦被选中就更新,因为它从数据库读取数据,我需要它是最新的。只刷新bootstrap中包含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>
我该怎么办呢?
答
在点击通话刷新功能,并通过ID。 //此语句将刷新Iframe。 content.Windows.location.reload(); document.getElementById('some_frame_id')。contentWindow.location.reload();
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>
不幸的是,没有工作,iframe没有再次加载 – user1947393
可以请更新plunker上的代码。 –
请在这里找到https://plnkr.co/edit/RVKJYCANYtCurnfhveWY?p=preview,在iframe里面的菜单2例如:如果我从右边菜单中点击一个链接,比如“Tables”,然后我去Menu1,然后回到Menu2,它显示“Tables”上的页面,但它不会改变。 – user1947393