How to Refresh an Iframe Using JavaScript

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

document.getElementById('some_frame_id').contentWindow.location.reload();

be careful, in Firefox, window.frames[] cannot be indexed by id, but by name or index

How to refresh an IFrame using Javascript?

var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;

Reload iframe using javascript

function reload( {
  document.getElementById('iFrameID').contentDocument.location.reload(true);
}

Can I force a hard refresh on an iframe with JavaScript?

If the iframe is same-origin, you can force a full page reload using

iframe.contentWindow.location.reload(true);//The argument "true" will force all loaded resources, such as images, to be re-checked for expiry at the server

↪ View an example at jsFiddle

↪ More information at the Mozilla Developer wiki

If you have control over the HTTP headers sent for the page in the iframe, you can also instruct the browser not to cache it in the first place.

Furthermore, most web pages completely ignore parameters in the query string for which they have no handling code, so you could add a random value or a timestamp to the query string to make sure the browser sees it as a "new" page and does not use the cached copy:

if(iframe.src.indexOf('timestamp') > -1){ // Check if we still have a timestamp in the URL from a previous refresh
  iframe.src = iframe.src.replace(/timestamp=[^&]+/, 'timestamp=' + Date.now()); // And if so, replace it instead of appending so the URL doesn't grow too long.
}else{ // Else we will append the timestamp
  iframe.src += (iframe.src.indexOf('?') > -1 ? "&" : "?") + 'timestamp=' + Date.now();// If the URL contains a ?, append ×tamp=...; otherwise, append ?timestamp=...
}

Use new Date().getTime() instead of Date.now() if support for older browsers is important.

How to refresh iframe after regular interval in html

Try this :

<script>
   var src = $('#foo').attr('src');
   setInterval(function () {
        $('#foo').remove();
        var iframe_html = '<iframe src="'+ src +'" width="100%" height="100%"></iframe>';
        $('#iframe').html(iframe_html);
    }, 1000);
</script>
<span id="iframe">
    <iframe id="foo" src="http://www.google.com" width="100%" height="100%"></iframe>
</span>

If you are using any server side language the page will always look like refreshing itself but if you check the net calls of the page it will shows you one hit for your page and repetitive hits for iframe's src. Hope this will help you out.

need an iframe to refresh automatically

Use following code

<iframe id="Doyle" src="http://www.dot.ca.gov/dist2/rwis/sm_doyle.php" 
width="375" height="560">
</iframe>

<script>
window.setInterval("reloadIFrame();", 30000);

function reloadIFrame() {
 var frameHolder=document.getElementById('Doyle');
frameHolder.src="http://www.dot.ca.gov/dist2/rwis/sm_doyle.php"
}
</script>

check working example below

http://plnkr.co/edit/Mre0AgMjh5o7wXl5YvVP?p=preview

Reload an iframe with jQuery

If the iframe was not on a different domain, you could do something like this:

document.getElementById(FrameID).contentDocument.location.reload(true);

But since the iframe is on a different domain, you will be denied access to the iframe's contentDocument property by the same-origin policy.

But you can hackishly force the cross-domain iframe to reload if your code is running on the iframe's parent page, by setting it's src attribute to itself. Like this:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

If you are trying to reload the iframe from another iframe, you are out of luck, that is not possible.

Reset/Reload IFrame JavaScript context

Once you create an IFrame, you cannot edit its source in order to prevent people using IFrames to inject code into sites for purposes of stealing information etc or creating fake websites that have IFrames with malicious code included to otherwise secure domains.

You will have to render the updates from the editor via AJAX to a backend such as PHP server or node.js or completely remove the IFrame element and create a brand new one via

var if = document.createElement("IFRAME");
if.src = /* your code */
var container = document.getElementById("container");

Then use a similar system to delete the item each time you want an update.

container.innerHTML = "";