Wie iframe nachladen bei der Auswahl Liste Artikel

Question

Meine jsp Seite

<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> 

ich drei iframe definieren. Ich möchte iframe bei Auswahl des Listenelements neu laden.

Answer 1

Ich fügte ein <script> Tag (Inhalt unten) an das Ende des Körpers, der auf Klicks auf die Ankerelemente in der Liste lauscht, folgt ihrem href-Attribut und lädt den iframe in diesem Element neu, indem er sein src-Attribut auf sich selbst setzt.

// 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

Beachten Sie, dass ich Ihre "a" Tags geändert haben zwei "Daten" Referenzen enthalten. Sie werden in der Funktion ChangePage verwendet.

Beachten Sie, dass ich auch "ID" -Tags zu Ihren iframes hinzugefügt habe.

<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); 

In Change, $ (this) nimmt das Objekt hinter dem Anklicken eines Tags.

Mit diesem können wir bestimmen, welchen iframe wir ändern werden (wegen des Datenabschnitts) und welche URL auf den iframe gerichtet wird (using data-url).

Hoffentlich wird das tun, was Sie wollen ...