1

I'm using Three iframe inside index files with 3 Tabs. I want to load or refresh the files inside the iframe when each tab is selected.

Here is my index files

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#home" data-toggle="tab">Enter</a></li>
  <li><a data-target="#profile" data-toggle="tab" >Display</a></li>
  <li><a data-target="#messages" data-toggle="tab">Search</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">
    <iframe src="EnterBook.php"  ></iframe> 
  </div>
  <div class="tab-pane" id="profile" >
    <iframe src="DisplayBooks.php"  ></iframe>
  </div>
  <div class="tab-pane" id="messages">
    <iframe src="SearchBooks.php"  ></iframe>   
  </div>      
</div>

I did look over other solution but nothing helped.. Please anyone can have a look over it.

Mohammad
  • 21,175
  • 15
  • 55
  • 84
redface
  • 305
  • 1
  • 6
  • 18
  • https://stackoverflow.com/questions/2064850/how-to-refresh-an-iframe-using-javascript - try this it will work – Kesavan R Nov 22 '18 at 07:26
  • Maybe you can set the iframe URL via javascript variable, and when the user switching between tabs, set the current tab iframe URL to the URL you want, and all the rest of the variables set to null – Nir Berko Nov 22 '18 at 07:27

1 Answers1

0

You need to add click event handler to every tab and in callback function get relevant iframe of clicked tab and change reset src attribute of it or use Location.reload() 

document.querySelectorAll('#myTab a').forEach(function(ele){
  ele.onclick = function(){
    var iframe = document.querySelector(this.dataset.target+'>iframe');
    iframe.src = iframe.src;
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
  <li class="active">
    <a data-target="#home" data-toggle="tab">Enter</a>
  </li>
  <li>
    <a data-target="#profile" data-toggle="tab" >Display</a>
  </li>
  <li>
    <a data-target="#messages" data-toggle="tab">Search</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">
    <iframe src="https://stacksnippets.net/"></iframe> 
  </div>
  <div class="tab-pane" id="profile">
    <iframe src="https://stacksnippets.net/"></iframe>
  </div>
  <div class="tab-pane" id="messages">
    <iframe src="https://stacksnippets.net"></iframe>   
  </div>      
</div>
Mohammad
  • 21,175
  • 15
  • 55
  • 84
  • it doesn't load ...only when I refresh manually from browser reload page..then only it load new data if not it stays same. – redface Nov 22 '18 at 16:56
  • @redface In http://jsfiddle.net/n9rbu804/ any time you click on tabs, iframe load event fired. – Mohammad Nov 22 '18 at 17:28
  • yes it works now..I put script on head which didn't triggered, so just I put script in bottom and it now works. Thanks. – redface Nov 23 '18 at 06:42