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

Question

I would like to reload an <iframe> using JavaScript. The best way I found until now was set the iframe’s src attribute to itself, but this isn’t very clean. Any ideas?

Is there a reason why setting the `src` attribute to itself isn't clean? It seems to be the only solution that works across browsers and across domains — mirhagk, Sep 22 '15 at 18:21
Setting the `src` attribute to itself causes problems if you have a link elsewhere that targets the ``. Then the frame will show the initial page as originally designed. — E. van Putten, Jun 11 '20 at 08:57
Setting the `src` attribute scrolls the iframe up to the top of the page, location.reload() does not. If you are reloading because e.g. the CSS underlying the iframe has changed, the latter would be preferable. — Sergey Orshanskiy, Oct 16 '21 at 18:33

score 294 · Accepted Answer · edited Jan 30 '11 at 03:58

294

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

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

edited Jan 30 '11 at 03:58

Yi Jiang

49,435
16
136
136

answered Sep 17 '08 at 19:36

Ed.

5,854
3
20
12

42

Actually, this approach didn't work for me in Chrome. There was no 'contentWindow' property. Though it was possible to use document.getElementById('some_frame_id').location.reload(); The method that worked for both FF and Chrome was document.getElementById('iframeid').src = document.getElementById('iframeid').src – Mike Bevz Aug 11 '11 at 13:09
2

@MikeBevz can location.reload is also accessible using Jquery selector? – Jitender Mahlawat Nov 21 '12 at 10:11
4

absolute it's work, but stuck with same domain origin policy ==a – Bobby Stenly Mar 19 '13 at 06:32
7

`frames[1].location.href.reload()` and `window.frames['some_frame_id'].location.href.reload()` can also be used – Daniël W. Crompton Sep 28 '13 at 08:53
Hi does this working on ie ?? I try to used it on ie 10 it doesn't work for me. – Coder Nov 27 '13 at 05:09
With Chrome 30, I can do cross-domain request from within an iframe. `document.getElementById("iframeForCrossDomain").src="http://anotherdomain.com/index.html"` – ZJ Lyu Nov 29 '13 at 07:46
In IE if you use a frameset and the object returned by getElementById is a HTMLFrameElement you need to specify the rows attribute for every row for example if you have 3 frames and your rows="50%,25%" The third frame will return as a HTMLFrameElement, but if you change the rows to rows="50%,25%,25%" the third frame will return as a window object (in FF the third frame returns as a window object in both cases) – notzippy Dec 18 '13 at 18:19
1

If you can't access iframe window, you have to change src attribute of iframe tag. – Maciej Krawczyk Jun 01 '16 at 12:42
Eventually, for me, the only solution that worked was setting the src of the iframe again (to the original one, in this case). Trying to access the "reload" function failed because of the well-known cross-domain issue... FYI – TheCuBeMan Jul 20 '17 at 15:21
If the iframe source contains a submitted form, will `reload` cause it to resubmit (as if you hit the browser refresh button)? If so, that would be a significant difference between the two methods. – xr280xr Feb 28 '18 at 18:29
1

I noticed this wasn't working when i tried to assign the same URL, i assume Chrome was doing some caching. So i appedned a simple date parameter `"?d=" + Date.now()` and that seemed to fix the issue – migreva Apr 27 '18 at 18:59
I get `Uncaught TypeError: Cannot read property 'location' of undefined` – Feb 23 '19 at 03:53
To reach into an iframe, it has to be from the same origin as its parent, or you won't have access. – Ed. Feb 23 '19 at 14:14
this approach is not working in google chrome or firefox – Rizwan Ullah Jul 10 '23 at 10:52

score 247 · Answer 2 · edited Nov 01 '22 at 17:01

247

document.getElementById('iframeid').src = document.getElementById('iframeid').src

It will reload the iframe, even across domains! Tested with IE7/8, Firefox and Chrome.

Note: As mentioned by @user85461, this approach doesn't work if the iframe src URL has a hash in it (e.g. http://example.com/#something).

edited Nov 01 '22 at 17:01

joe

3,752
1
32
41

answered Oct 31 '10 at 06:27

evko

2,471
1
14
2

88

`document.getElementById('iframeid').src += '';` also works: http://jsfiddle.net/Daniel_Hug/dWm5k – Web_Designer Feb 12 '12 at 06:44
5

And what exactly do you do if the iframe's source has *changed* since it was added to the page? – Niet the Dark Absol Oct 11 '12 at 15:17
1

Works for me on Chrome ver33! Strange that we can't simply use `reload` but this is allowed. – Luke Apr 09 '14 at 15:23
13

Note that if the iframe src has a hash in it (e.g. ``http://example.com/#something``), this won't reload the frame. I've used the approach of adding a throwaway query parameter like ``?v2`` to the URL before the hash. – user85461 Feb 19 '15 at 04:21
3

This causes the iframe to scroll back to the top. – MrTux Mar 29 '17 at 13:40
@NiettheDarkAbsol It will still work as long as you haven't stored the source in a variable – Ian Feb 06 '18 at 18:10
@MrTux That's why it wouldn't be okay for me as well. – jg6 Sep 15 '20 at 17:50
lol, this is crazy. It still works in 2022 :) – Beemo Oct 25 '22 at 18:14
To keep any hashes, use `.contentWindow.location.href += ""` – gatopeich Jun 23 '23 at 10:50
not working in google chrome – Rizwan Ullah Jul 10 '23 at 10:52

score 68 · Answer 3 · edited Aug 03 '21 at 13:49

68

If using jQuery, this seems to work:

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

edited Aug 03 '21 at 13:49

Yahel

37,023
22
103
153

answered Oct 18 '11 at 15:29

lousygarua

681
5
3

8

This, without jQuery: ```var iframe = document.getElementById("your_iframe"); iframe.src = src; ``` – Seagrass Jul 14 '14 at 19:20
1

Please note to any future people that this (and the plain js solution) are the best to use, as it's cross platform and works across domains. – mirhagk Sep 22 '15 at 18:18
18

@Seagrass I think you mean: `var iframe = document.getElementById("your_iframe"); iframe.src = iframe.src;` – maxisme Feb 14 '16 at 01:33
none of the above solutions working now. – Rizwan Ullah Jul 10 '23 at 10:53

score 48 · Answer 4 · edited May 03 '22 at 20:08

48

Appending an empty string to the src attribute of the iFrame also reloads it automatically.

document.getElementById('id').src += '';

edited May 03 '22 at 20:08

Michael T

370
4
16

answered Oct 24 '17 at 04:38

Yohanim

3,319
9
52
92

This is the best answer because it works on all iframes, including cross-origin iframes. In contrast, the `contentWindow.location.reload()` approach only works on iframes from the same origin. – BinaryNate Aug 22 '21 at 20:57
But the latter doesn't scroll to the top, so it depends on your priorities. – Sergey Orshanskiy Oct 16 '21 at 18:34

score 19 · Answer 5 · edited Jan 30 '11 at 03:59

19

window.frames['frameNameOrIndex'].location.reload();

edited Jan 30 '11 at 03:59

Yi Jiang

49,435
16
136
136

answered Sep 17 '08 at 19:01

scunliffe

62,582
25
126
161

score 12 · Answer 6 · answered Oct 08 '10 at 00:02

Because of the same origin policy, this won't work when modifying an iframe pointing to a different domain. If you can target newer browsers, consider using HTML5's Cross-document messaging. You view the browsers that support this feature here: http://caniuse.com/#feat=x-doc-messaging.

If you can't use HTML5 functionality, then you can follow the tricks outlined here: http://softwareas.com/cross-domain-communication-with-iframes. That blog entry also does a good job of defining the problem.

Liam M · Answer 7 · 2012-11-14T04:32:05.427

9

I've just come up against this in chrome and the only thing that worked was removing and replacing the iframe. Example:

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

Pretty simple, not covered in the other answers.

edited Nov 14 '12 at 04:32

answered Aug 01 '12 at 16:09

Liam M

5,306
4
39
55

yes this is the only solution that worked for me as well. – Rizwan Ullah Jul 10 '23 at 10:55

score 7 · Answer 8 · answered Sep 23 '15 at 13:28

7

Simply replacing the src attribute of the iframe element was not satisfactory in my case because one would see the old content until the new page is loaded. This works better if you want to give instant visual feedback:

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

answered Sep 23 '15 at 13:28

Patrick Rudolph

2,201
17
30

1

I've just tested the same approach but without setTimeout - and it worked for me. actually, just iframe.setAttribute('src', iframe.getAttribute('src')) – bonbonez May 11 '16 at 15:56
can confirm what @bonbonez said works for me – Zpeed Tube Jun 21 '23 at 14:41

score 4 · Answer 9 · answered Sep 15 '12 at 06:58

A refinement on yajra's post ... I like the thought, but hate the idea of browser detection.

I rather take ppk's view of using object detection instead of browser detection, (http://www.quirksmode.org/js/support.html), because then you're actually testing the capabilities of the browser and acting accordingly, rather than what you think the browser is capable of at that time. Also doesn't require so much ugly browser ID string parsing, and doesn't exclude perfectly capable browsers of which you know nothing about.

So, instead of looking at navigator.AppName, why not do something like this, actually testing for the elements you use? (You could use try {} blocks if you want to get even fancier, but this worked for me.)

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

This way, you can go try as many different permutations as you like or is necessary, without causing javascript errors, and do something sensible if all else fails. It's a little more work to test for your objects before using them, but, IMO, makes for better and more failsafe code.

Worked for me in IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m), and Opera (12.0.2) on Windows.

Maybe I could do even better by actually testing for the reload function, but that's enough for me right now. :)

score 4 · Answer 10 · answered Jan 28 '14 at 18:25

4

for new url

location.assign("http:google.com");

The assign() method loads a new document.

reload

location.reload();

The reload() method is used to reload the current document.

answered Jan 28 '14 at 18:25

user2675617

254
3
4

score 3 · Answer 11 · answered Jan 07 '18 at 17:02

3

Another solution.

const frame = document.getElementById("my-iframe");

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

answered Jan 07 '18 at 17:02

Vasile Alexandru Peşte

1,054
11
20

A disadvantage of that is modifies the root document DOM tree and will cause a repaint. I used `var url = ifr.src; ifr.src = null; ifr.src = url;` – Pocketsand Feb 27 '18 at 12:10

score 3 · Answer 12 · answered May 24 '18 at 13:57

3

Now to make this work on chrome 66, try this:

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}

answered May 24 '18 at 13:57

Northern

2,338
1
17
20

score 2 · Answer 13 · edited Oct 06 '11 at 09:55

2

In IE8 using .Net, setting the iframe.src for the first time is ok, but setting the iframe.src for the second time is not raising the page_load of the iframed page. To solve it i used iframe.contentDocument.location.href = "NewUrl.htm".

Discover it when used jQuery thickBox and tried to reopen same page in the thickbox iframe. Then it just showed the earlier page that was opened.

edited Oct 06 '11 at 09:55

nbk

1,992
2
19
34

answered Feb 01 '10 at 09:43

Shaulian

411
5
8

Paresh3489227 · Answer 14 · 2014-05-09T10:32:21.880

2

If you using Jquery then there is one line code.

$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

and if you are working with same parent then

$('#iframeID',parent.document).attr('src',$('#iframeID',parent.document).attr('src'));

edited May 09 '14 at 10:32

answered May 09 '14 at 06:51

Paresh3489227

845
11
22

Vivek Kumar · Answer 15 · 2018-03-26T13:24:58.893

2

Using self.location.reload() will reload the iframe.

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />

edited Mar 26 '18 at 13:24

answered May 01 '17 at 08:17

Vivek Kumar

2,625
2
25
33

6

that reload the whole main window – pery mimon Aug 28 '19 at 09:20
This works from JavaScript inside the current iFrame. – Saminda Peramuna Mar 16 '22 at 17:33

score 2 · Answer 16 · answered Nov 29 '11 at 01:23

Use reload for IE and set src for other browsers. (reload does not work on FF) tested on IE 7,8,9 and Firefox

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

score 1 · Answer 17 · edited May 22 '12 at 23:54

1

<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script>

edited May 22 '12 at 23:54

Tharabas

3,402
1
30
29

answered May 22 '12 at 19:06

Sid

11
2

1

Not the choice I would use but I guess it would do. With some additional code that you could have added in. – transilvlad Oct 21 '12 at 13:11

score 1 · Answer 18 · answered Jul 23 '13 at 11:08

If all of the above doesn't work for you:

window.location.reload();

This for some reason refreshed my iframe instead of the whole script. Maybe because it is placed in the frame itself, while all those getElemntById solutions work when you try to refresh a frame from another frame?

Or I don't understand this fully and talk gibberish, anyways this worked for me like a charm :)

score 1 · Answer 19 · answered Feb 07 '14 at 22:02

Have you considered appending to the url a meaningless query string parameter?

<iframe src="myBaseURL.com/something/" />

<script>
var i = document.getElementsById("iframe")[0],
    src = i.src,
    number = 1;

//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>

It won't be seen & if you are aware of the parameter being safe then it should be fine.

score 1 · Answer 20 · answered Sep 02 '21 at 09:58

1

Reload from inside Iframe

If your app is inside an Iframe you can refresh it with replacing the location href:

document.location.href = document.location.href

answered Sep 02 '21 at 09:58

Andrii Verbytskyi

7,155
3
47
38

score 0 · Answer 21 · edited May 23 '17 at 12:02

If you tried all of the other suggestions, and couldn't get any of them to work (like I couldn't), here's something you can try that may be useful.

HTML

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

JS

$('.refresh-this-frame').click(function() {
    var thisIframe = $(this).attr('rel');
    var currentState = $(thisIframe).attr('src');
    function removeSrc() {
        $(thisIframe).attr('src', '');
    }
    setTimeout (removeSrc, 100);
    function replaceSrc() {
        $(thisIframe).attr('src', currentState);
    }
    setTimeout (replaceSrc, 200);
});

I initially set out to try and save some time with RWD and cross-browser testing. I wanted to create a quick page that housed a bunch of iframes, organized into groups that I would show/hide at will. Logically you'd want to be able to easily and quickly refresh any given frame.

I should note that the project I am working on currently, the one in use in this test-bed, is a one-page site with indexed locations (e.g. index.html#home). That may have had something to do with why I couldn't get any of the other solutions to refresh my particular frame.

Having said that, I know it's not the cleanest thing in the world, but it works for my purposes. Hope this helps someone. Now if only I could figure out how to keep the iframe from scrolling the parent page each time there's animation inside iframe...

EDIT: I realized that this doesn't "refresh" the iframe like I'd hoped it would. It will reload the iframe's initial source though. Still can't figure out why I couldn't get any of the other options to work..

UPDATE: The reason I couldn't get any of the other methods to work is because I was testing them in Chrome, and Chrome won't allow you to access an iframe's content (Explanation: Is it likely that future releases of Chrome support contentWindow/contentDocument when iFrame loads a local html file from local html file?) if it doesn't originate from the same location (so far as I understand it). Upon further testing, I can't access contentWindow in FF either.

AMENDED JS

$('.refresh-this-frame').click(function() {
    var targetID = $(this).attr('rel');
    var targetSrc = $(targetID).attr('src');
    var cleanID = targetID.replace("#","");     
    var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
    var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );      
    if (chromeTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }
    if (FFTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }       
    if (chromeTest == false && FFTest == false) {
        var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc2() {
            $(targetID).attr('src', targetLoc);
        }
        setTimeout (replaceSrc2, 200);
    }
});

score 0 · Answer 22 · edited Aug 26 '20 at 13:14

0

For debugging purposes one could open the console, change the execution context to the frame that he wants refreshed, and do document.location.reload()

edited Aug 26 '20 at 13:14

jpaugh

6,634
4
38
90

answered Sep 13 '17 at 14:00

h3dkandi

1,106
1
12
27

score 0 · Answer 23 · answered Jul 26 '22 at 01:18

I had a problem with this because I didnt use a timeout to give the page time to update, I set the src to '', and then set it back to the original url, but nothing happened:

function reload() {
   document.getElementById('iframe').src = '';
   document.getElementById('iframe').src = url;
}

but it didnt reload the site, because it is single threaded, the first change doesnt do anything, because that function is still taking up the thread, and then it sets it back to the original url, and I guess chrome doesnt reload because preformance or whatever, so you need to do:

function setBack() {
   document.getElementById('iframe').src = url;
}
function reload() {
   document.getElementById('iframe').src = '';
   setTimeout(setBack,100);
}

if the setTimeout time is too short, it doesnt work, so if its not working, try set it to 500 or something and see if it works then.

this was in the latest version of chrome at the time of writing this.

This can happen if you call the function before the page is fully loaded. — MeSo2, Jan 29 '23 at 22:55

score 0 · Answer 24 · answered Dec 23 '22 at 04:15

This way avoids adding history to some browsers (an unneeded overhead). In the body section put:

    <div id='IF'>
    <iframe src='https://www.wolframalpha.com/input?i=Memphis%20TN%20Temperature' 
        style="width:5in; height:6in"  // or whatever you want in your Iframe
        title'Temperature'></iframe>
    </div>

Then in some JAVASCRIPT you may have a function like:

    function    UPdate()    { // Iframe
    T1=document.getElementById('IF')
    T2=T1.innerHTML
    T1.innerHTML=T2
}

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

24 Answers24

Reload from inside Iframe

Linked

Related