CODEWITHSUNDEEP
javascriptiframe
Elitmiar
Elitmiar

Reputation: 36899

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.

Upvotes: 152

Views: 394004

Answers (13)

Horia Dragomir
Horia Dragomir

Reputation: 2888

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

iframe.contentWindow.location.reload();

Upvotes: 29

NotoriousPyro
NotoriousPyro

Reputation: 647

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.

Upvotes: 2

pery mimon
pery mimon

Reputation: 8343

2017:

If it in on same domain just :

iframe.contentWindow.location.reload();

will work.

Upvotes: 3

lcharbon
lcharbon

Reputation: 3308

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;
}

Upvotes: 3

Vasile Alexandru Peste
Vasile Alexandru Peste

Reputation: 311

You can use this simple method

function reloadFrame(iFrame) {

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

}

Upvotes: 7

Ferhat KO&#199;ER
Ferhat KO&#199;ER

Reputation: 4075

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/

Upvotes: -2

michelpm
michelpm

Reputation: 1845

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);

Upvotes: 0

Marek Pavelek
Marek Pavelek

Reputation: 1147

Works for IE, Mozzila, Chrome

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

Upvotes: 7

sarvesh singh
sarvesh singh

Reputation: 319

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.

Upvotes: 0

Tony
Tony

Reputation: 91

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);}

Upvotes: 1

nfechner
nfechner

Reputation: 17545

This should help:

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

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

Upvotes: 115

Amarghosh
Amarghosh

Reputation: 59471

Got this from here

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

Upvotes: 2

kjagiello
kjagiello

Reputation: 8410

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

Upvotes: 194

Related Questions