使用javascript单击相关标签时如何刷新iframe？

Question

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.

Answer 1

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>