How to refresh an IFrame using Javascript?

Question

I have a webpage with an IFrame and a Button, once the button is pressed I need the IFrame to be refreshed. Is this possible, if so how? I searched and could not find any answers.

Balf

possible duplicate of What's the best way to reload an iframe using JavaScript? – Vivia

Answer 1

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

Putto

It works for me in this version of Chrome: Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1) – Bashful

FYI - There is currently (as of January 2013) a Chromium project bug (code.google.com/p/chromium/issues/detail?id=172859) which causes iframe updates to add to document history. – Wiretap

If into iFrame change the page, this method lost the navigation – Kinata

var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src; – Brachial

changing src of the iframe, generates a new element, then if you have a reference of that iframe, you should do that: iframeEl.src = iframeEl.src; iframeEl = iframeEl.parentNode.getElementById('your-iframe-id'); – Michale

this perfectly work for me in chrome document.getElementById('frame_id').contentDocument.location.reload(true); – Badinage

@MianHaseeb It has already been mentioned in other answer below; also it works only for same-origin iframe. – Pedagogy

I've tried this answer and location.reload(true), both failed. The only workable code is @lyfing's. – Thamora

Answer 2

This should help:

document.getElementById('FrameID').contentWindow.location.reload(true);

EDIT: Fixed the object name as per @Joro's comment.

Awoke

This is not working in IE9. You should use contentWindow instead contentDocument. – Bombacaceous

Thanks for the answer. Additionally, If you must positively cause a refresh to another page to another within the iframe then instead of reload(true) you would use this: document.getElementById('FrameID').contentWindow.location.replace(new_url); – Robot

This does not work with iframes with different origins (protocol, hostname or port). – Alejandraalejandrina

Answer 3

provided the iframe is loaded from the same domain, you can do this, which makes a little more sense:

iframe.contentWindow.location.reload();

Courbevoie

Answer 4

Works for IE, Mozzila, Chrome

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

Therewithal

Answer 5

You can use this simple method

function reloadFrame(iFrame) {

    iFrame.parentNode.replaceChild(iFrame.cloneNode(), iFrame);

}

Preceding

Answer 6

Resetting the src attribute directly:

iframe.src = iframe.src;

Resetting the src with a time stamp for cache busting:

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

Clearing the src when query strings option is not possible (Data URI):

var wasSrc = iframe.src

iframe.onload = function() {
    iframe.onload = undefined;
    iframe.src = wasSrc;
}

Alisun

Answer 7

2017:

If it in on same domain just :

iframe.contentWindow.location.reload();

will work.

Oribelle

Answer 8

Got this from here

var f = document.getElementById('iframe1');
f.src = f.src;

Fossorial

If into iFrame change the page, this method lost the navigation – Kinata

Answer 9

If you use hash paths (like mywebsite.com/#/my/url) which might not refresh frames on switching hash:

<script>
    window.onhashchange = function () {
        window.setTimeout(function () {
            let frame = document.getElementById('myFrame');
            if (frame !== null) {frame.replaceWith(frame);}
        }, 1000);
    }
</script>

Unfortunately, if you don't use the timeout JS may try to replace the frame before the page has finished loading the content (thus loading the old content). I'm not sure of the workaround yet.

Rhythmical

Answer 10

Here is the HTML snippet:

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

And my Javascript code:

window.onload = function(){
setInterval(function(){
    parent.frames['idFrame'].location.href = "chat.txt";
},1000);}

Cimah

Answer 11

If you have Multiple iFrames inside the page, then this script might be useful. I am asuming there is a specific value in the iFrame source which can be used to find the specific iFrame.

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
    var source =  iframes[i].attributes.src.nodeValue;
    if(source.indexOf('/yourSorce') > -1){
        yourIframe = iframes[i];
    }   
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

Replace "/yourSource" with value you need.

Allusion

Answer 12

If your iframe's URL does not change, you can just recreate it.

If your iframe is not from the same origin (protocol scheme, hostname and port), you will not be able to know the current URL in the iframe, so you will need a script in the iframe document to exchange messages with its parent window (the page's window).

In the iframe document:

window.addEventListener('change', function(e) {
  if (e.data === 'Please reload yourself') {
    var skipCache = true; // true === Shift+F5
    window.location.reload(skipCache);
  }
}

In your page:

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);

Alejandraalejandrina

Answer 13

You can use this:

Js:

function refreshFrame(){
    $('#myFrame').attr('src', "http://blablab.com?v=");
}

Html:

`<iframe id="myFrame" src=""></iframe>`

JS Fiddle : https://jsfiddle.net/wpb20vzx/

Lemmon

The question has nothing to do with the popular JavaScript library called jQuery. – Almire

What would Math.round() do? It looks totally useless here. – Abscind

Hi I used Math.round() Because Some Browser can cache Url - page so refresh not working. – Beacon