Как перезагрузить IFRAME на выбор элемента списка

Question

Моя страница JSP

<ul class="nav nav-pills nav-stacked" id="myTab"> 
    <li class="active"><a data-toggle="tab" href="#section1">frame1</a></li> 
    <li><a href="#section2">frame2</a></li> 
    <li><a href="#section3">frame3</a></li> 
    </ul> 


    <div id="section1" class="tab-pane fade in active"> 
     <iframe src="./abc" style="border:none" height="1500" width="100%"></iframe> 
    </div> 
    <div id="section2" class="tab-pane fade"> 
     <iframe src="./def" style="border:none" height="1500" width="100%"></iframe> 
    </div> 
    <div id="section3" class="tab-pane fade"> 
     <iframe src="./efg" style="border:none" height="1500" width="100%"></iframe> 
    </div> 

У меня есть определить три фрейма. Я хочу перезагрузить iframe при выборе элемента списка.

Answer 1

Я добавил тэг <script> (содержимое ниже) в конец тела, который прослушивает клики на элементах привязки в списке, следует их атрибуту href и перезагружает iframe в этом элементе, устанавливая свой атрибут src для себя.

// Select the parent element of the list items 
 
var myTab = document.getElementById("myTab"); 
 
// Listen for clicks 
 
myTab.addEventListener("click",function(event){ 
 
    // If the user clicked on an anchor 
 
    if(event.target.nodeName === "A"){ 
 
    // Get the iframe which is the first element child of the anchor destination 
 
    var iframe = document.getElementById(event.target.getAttribute("href").substr(1)).firstElementChild; 
 
    // Reload it 
 
    iframe.src = iframe.src; 
 
    } 
 
});

<ul class="nav nav-pills nav-stacked" id="myTab"> 
 
    <li class="active"><a data-toggle="tab" href="#section1">frame1</a> 
 
    </li> 
 
    <li><a href="#section2">frame2</a> 
 
    </li> 
 
    <li><a href="#section3">frame3</a> 
 
    </li> 
 
</ul> 
 

 

 
<div id="section1" class="tab-pane fade in active"> 
 
    <iframe src="data:text/html,1<script>setInterval(function(){document.body.textContent = parseInt(document.body.textContent) + 1},1000)</script>" style="border:none" height="50" width="100%"></iframe> 
 
</div> 
 
<div id="section2" class="tab-pane fade"> 
 
    <iframe src="data:text/html,1<script>setInterval(function(){document.body.textContent = parseInt(document.body.textContent) + 1},1000)</script>" style="border:none" height="50" width="100%"></iframe> 
 
</div> 
 
<div id="section3" class="tab-pane fade"> 
 
    <iframe src="data:text/html,1<script>setInterval(function(){document.body.textContent = parseInt(document.body.textContent) + 1},1000)</script>" style="border:none" height="50" width="100%"></iframe> 
 
</div>

Answer 2

HTML

Обратите внимание, что я изменил свой "А" метки содержат два "данные" ссылки. Они используются в функции под названием ChangePage.

Обратите внимание, что я добавил теги «id» для ваших фреймов.

<ul class="nav nav-pills nav-stacked" id="myTab"> 
    <li class="active"><a data-toggle="tab" href="#" class="section" data-section="one" data-url="./abc">frame1</a></li> 
    <li><a href="#" data-section="two" class="section" data-url="./def">frame2</a></li> 
    <li><a href="#" data-section="three" data-url="./efg" class="section">frame3</a></li> 
    </ul> 

<div id="section1" class="tab-pane fade in active"> 
    <iframe src="./abc" id="one" style="border:none" height="1500" width="100%"></iframe> 
</div> 
<div id="section2" class="tab-pane fade"> 
    <iframe src="./def" id="two" style="border:none" height="1500" width="100%"></iframe> 
</div> 
<div id="section3" class="tab-pane fade"> 
    <iframe src="./efg" id="three" style="border:none" height="1500" width="100%"></iframe> 
</div> 

Javascript

function ChangePage() 
{ 
    // $(this) will be an object containing reference to the 
    // link the user clicked 
    var iframetag=$(this).data("section"); 
    var target=$(this).data("url"); 
    $("#"+iframetag).prop("src", target); 
} 

// Find all a tags that have class section and assign an onclick event 
// to call ChangePage when the link is clicked 
$("a.section").click(ChangePage); 

В ChangePage, $ (это) принимает объект за нажатым тегом.

Используя это, мы можем определить, какой iframe мы изменим (из-за раздела данных) и какой url будет направлен на iframe (используя data-url).

Надеюсь, что вы сделаете то, что хотите ...