How to reload an iframe in jQuery?

By Faruque Ahamed Mollick

In this post, we are going to see how we can reload an iframe using jQuery code.

We use the HTML iframe tag to load external content, videos or web page into our own web page. We can see YouTube videos running on other website using the iframe.

Disable right click, copy, cut on web page using jQuery

Now we will write code to reload the source URL of an iframe. We will use jQuery for this task.  Before we start coding in jQuery, let’s see our HTML code:

<iframe src="http://domain.com/content_path"></iframe>
<button id="reload_iframe">Reload</button>

The above HTML code contains an iframe and a button with it. We are going to write our jQuery code so that on clicking the button, the iframe will reload the path within it.

Below is our jQuery JavaScript code:

$(document).ready(function(){
 $( "#reload_iframe" ).click(function() {
   $('iframe').attr('src', $('iframe').attr('src'));
 });
});

In the above code, we take the id of our button and apply the jQuery click method. If we run the code on our browser, we will see that when we click on the button, the content inside the iframe code is reloaded. The reloading process is done just by setting the source URL again to the “src” attribute of the iframe.

Leave a Reply

Your email address will not be published. Required fields are marked *