Force an Iframe to Reload | CSS-Tricks

Remi Grumeau

# August 17, 2011

same without JQuery:

document.getElementsByTagName('iframe')[0].src=document.getElementsByTagName('iframe')[0].src

Because JQuery is not always needed :)

Reply

Jan-Marten

Permalink to comment# August 17, 2011

The difference is that Chris reloads all iframes whereas you only reload the first one the in the DOM tree.
Shahul

Permalink to comment# November 5, 2012

how to i resolve the caching problems

Jan-Marten

# August 17, 2011

Maybe I’m going way overboard, but if you wanna do it purely in JavaScript with the same results Chris got:

Object.prototype.each = function(f){
    var l = this.length;
    for(var i=0;i<l;i++)
        {
            try {
                this[i].eachCall = f;
                this[i].eachCall(this[i]);
            } catch(e){ throw e; }
        }
};

document.getElementsByTagName('iframe').each(function(){this.src=this.src;});

I can't wait for the day Chris learns how to do proper prototyping ;-)

Reply

Basil

Permalink to comment# September 12, 2011

I am newbie,
pls can you tell me where to place the code?
Rob

Permalink to comment# October 16, 2011

Basil, I know it might be a little late and you have probably figured it out but just in case, you place the code either into your ‘head’ or you create an external JavaScript file .js ending, just make sure you refer to it in your head.
Hopefully that’s of some help to you.
Matt Kipper

Permalink to comment# November 17, 2012

I’m currently using this version of the script, but it’s breaking the rest of the scripts on my page. Any idea what may be causing that?
Rahul

Permalink to comment# June 11, 2017

Is that solve caching problem in IE?

Alex

# September 8, 2011

I honestly only wanted to comment because your commenting system is gorgeous.

Kudos

Reply

junior

# July 11, 2012

comment preview doesn’t has funcionality , AhahahhAHHAhh

Reply

Celine

# October 16, 2012

Thanks!!

How would you go about reloading 2 or more iFrames?

Reply

Laurent

# October 24, 2012

Thanks a lot !

Reply

Nenad

# August 11, 2013

Thank you very much. I’ve tried more than one way of doing this, but none really worked for me. This is the real deal! Thanks once again :)

Reply

esm

# February 27, 2014

$(‘iframe’).attr(‘src’,’Your src here ‘);

Reply

Codeplussoft

# November 6, 2014

From Your text to link here…
$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );

Reply

Dheeraj Kawatra

# May 19, 2016

This code doesn’t work in case you have multiple iframes on a page. It replaces the url of all iframes to first one to be reloaded. More robust code jquery code would be:


  $('iframe').each(function (){
               var src= $(this).attr('src');

                $(this).attr('src', src);
            });

Reply

Bj

# February 8, 2018

If you want to reload all the frames inside te page you can try this

document.querySelectorAll("iframe").forEach(function(e){ e.src+=""; });

jQuery:

$("iframe").each(function(i,e){ e.src+=""; });

well in both cases, it doesn’t solve the cache problem :/

Reply

Comments

Leave a Reply Cancel reply