iframeを含むブートストラップ内の現在のナビゲーションタブのみを更新する

Question

ブートストラップ用のナビゲーションタブを使用しています.3つのタブがあり、各タブにページを表示するiframeが表示されます。 私は、各タブに関連する3つのページが一度だけ更新されることに気付きました（メインページへの最初の訪問）。後でタブから別のタブに移動すると、タブは更新されません。私は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に

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>

。 //このステートメントはIframeを更新します。document.getElementById（ 'some_frame_id'）。contentWindow.location.reload（）;