Related Articles

Related Articles

What’s the best way to reload / refresh an iframe?
  • Difficulty Level : Expert
  • Last Updated : 17 Jun, 2019

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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :