CODEWITHSUNDEEP
javascriptjqueryjsp
Aman Sachan
Aman Sachan

Reputation: 26

How to reload iframe on selecting list item

My jsp page

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

I have define three iframe. I want to reload iframe on selection of list item.

Upvotes: 0

Views: 288

Answers (2)

metarmask
metarmask

Reputation: 1857

I added a <script> tag (contents below) to the end of the body which listens for clicks on the anchor elements in the list, follows their href attribute and reloads the iframe in that element by setting its src attribute to itself.

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

Upvotes: 1

user4278933
user4278933

Reputation:

HTML

Notice that I have changed your "a" tags to contain two "data" references. They are used in the function called ChangePage.

Notice that I have added "id" tags too to your iframes.

  <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 ChangePage, $(this) takes the object behind the clicked a tag.

Using that, we can determine which iframe we will change (because of data-section) and which url will be directed at the iframe (using data-url).

Hopefully that will do what you want...

Upvotes: 0

Related Questions