仅刷新包含 iframe 的引导程序中的当前导航选项卡

Posted 2023-05-09

【中文标题】仅刷新包含 iframe 的引导程序中的当前导航选项卡

【英文标题】：Refresh only the current nav tab in bootstrap which contains iframe

【发布时间】：2018-01-18 15:20:16

【问题描述】：

我正在使用导航选项卡进行引导，我有 3 个选项卡，每个选项卡都显示 iframe 显示页面。 我注意到与每个选项卡相关的三个页面仅更新一次（第一次访问主页）。稍后当我从选项卡移动到另一个选项卡时，选项卡不会更新。我希望在单击选项卡后更新 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>

我该怎么做？

【参考方案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 没有重新加载

请在此处找到它，plnkr.co/edit/RVKJYCANYtCurnfhveWY?p=preview，例如在菜单 2 内的 iframe 中：如果我单击右侧菜单中的一个链接，例如“表格”，然后转到 Menu1，然后返回到Menu2，它在“Tables”上显示页面，它没有改变。

抱歉耽搁了。请参考plnkr.co/edit/Jexv8u?p=preview

我试过了，iframe 仍然没有更新。例如，当我在菜单 2 中时，它的 iframe 转到 getbootstrap.com/docs/3.3/css/#images ，它显示给定链接中的“图像”部分，如果我从右侧菜单单击另一个链接，例如“使用更少”，我转到菜单1，然后单击返回菜单2，该链接不会像原始链接“getbootstrap.com/docs/3.3/css/#images”那样返回到图像部分，它一直显示我上次在菜单2选项卡中单击时的“使用较少”。跨度>