How to reload an iframe in jQuery?

In this tutorial, you are going to learn how to reload an iframe using jQuery code.

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

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

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

<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. You can do the same thing also for the iframe video, image, web page etc.