Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search
iframes
Code Snippets → jQuery Code Snippets → Force an Iframe to Reload

Force an Iframe to Reload

Avatar of Chris Coyier
Chris Coyier on Aug 17, 2011 (Updated on Jul 20, 2019)

You can touch the src of it:

$('iframe').attr('src', $('iframe').attr('src'));
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Remi Grumeau
    Permalink to comment# 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

  2. Jan-Marten
    Permalink to comment# 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?

  3. Alex
    Permalink to comment# September 8, 2011

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

    Kudos

    Reply
  4. junior
    Permalink to comment# July 11, 2012

    comment preview doesn’t has funcionality , AhahahhAHHAhh

    Reply
  5. Celine
    Permalink to comment# October 16, 2012

    Thanks!!

    How would you go about reloading 2 or more iFrames?

    Reply
  6. Laurent
    Permalink to comment# October 24, 2012

    Thanks a lot !

    Reply
  7. Nenad
    Permalink to comment# 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
  8. esm
    Permalink to comment# February 27, 2014

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

    Reply
  9. Codeplussoft
    Permalink to comment# November 6, 2014

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

    Reply
  10. Dheeraj Kawatra
    Permalink to comment# 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
  11. Bj
    Permalink to comment# 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

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top