Question

[Solved] How to refresh an IFrame using Javascript?

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.

Enquirer: Elitmiar

||

Solution #1:

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

Solution #2:

This should help:

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

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

Respondent: nfechner

Solution #3:

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

iframe.contentWindow.location.reload();
Respondent: Horia Dragomir

Solution #4:

Works for IE, Mozzila, Chrome

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
Respondent: Marek Pavelek

Solution #5:

You can use this simple method

function reloadFrame(iFrame) {

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

}

Solution #6:

Got this from here

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

Solution #7:

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;
}
Respondent: lcharbon

Solution #8:

2017:

If it in on same domain just :

iframe.contentWindow.location.reload();

will work.

Respondent: pery mimon

Solution #9:

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);}
Respondent: Tony

Solution #10:

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.

Respondent: NotoriousPyro

Solution #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.

Respondent: sarvesh singh

Solution #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);
Respondent: michelpm

Solution #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/

Respondent: Ferhat KOÇER

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy