What’s the best way to reload / refresh an iframe?

Suppose that a user creates a webpage. Now he has a webpage, which contains an IFrame and a Button. Once the user presses the button, he/she needs the IFrame to be reloaded/refreshed. How are we going to make this possible? We are going to be finding it in the article.

The following syntax is work for both cases, where the IFrame is provided & loaded from the same domain, and where the IFrame is not from the same domain.

Syntax:



document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);

NOTE: In Firefox, if you are going to use window.frames[], it might not be indexed by id. So you have to index it by index or name.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        iframe {
            width: 786px;
            height: 600px;
            border: 0;
            overflow: hidden;
        }
    </style>
</head>
  
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <h4 style="color:purple">Reload / Refresh an iframe</h4>
        <iframe id="iframeid"
                src="https://ide.geeksforgeeks.org/" 
                width="600" 
                height="450"
                frameborder="0" 
                style="border:0" 
                allowfullscreen>
      </iframe>
        <input type="button"
               id="btn" 
               value="Refresh" />
  
        <script>
            function reload() {
                document.getElementById('iframeid').src += '';
            }
            btn.onclick = reload;
        </script>
    </center>
  
</body>
  
</html>

chevron_right


Output:
Before Refresh:

After Refresh:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
          
        iframe {
            width: 786px;
            height: 600px;
            border: 0;
            overflow: hidden;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h4 style="color:purple">Reload / Refresh an iframe</h4>
    <iframe id="iframeid" 
            src="Map Source"
            width="600" 
            height="450" 
            frameborder="0"
            style="border:0" 
            allowfullscreen>
  </iframe>
    <input type="button" 
           id="btn" 
           value="Refresh" />
  
    <script>
        function reload() {
            document.getElementById('iframeid').src += '';
        }
        btn.onclick = reload;
    </script>
  
</body>
  
</html>

chevron_right


Output:
When we load the code:
ngcut

The Working:
ngcut



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.