Reload an iframe with jQuery

Situation-specific solutions

You always need the perfect tool for the job. Here are some distinct approaches broken down by scenario:

Silent content swapping

In need of a subtle content change that doesn't scramble the user interface? Utilize the src method for smooth transitions.

//Smooth operator at work
$('#myframe').attr('src', 'http://somesite.com/something/new');


Day-to-day iframe management

If you're juggling multiple iframes with unique ids or classes, don't lose track. Laser-target only the ones you need.

// Laser-powered jQuery targeting, steady...BOOM!
$('iframe.myframe').attr('src', function(i, val) { return val; });


Persistence of initial source

Dynamic urls may keep your iframe's src on its toes. Here's how to maintain an initial source when need be:

// Consistency is key, and keys open doors.
$('#currentElement').attr('src', 'http://somesite.com/something/new');


Automated refresh on changes

Would you like an iframe to auto-refresh when a change is detected in another iframe? Tune in to relevant events and trigger a refresh:

// Iframe change detected! Initiating refresh sequence.
$('#otherIframe').on('contentChanged', function() {
  $('#currentElement').attr('src', function(i, val) { return val; });
});


Breaking down iframe reload mastery

Let's distill some critical knowledge about iframe reloading into this tight-knit guide.

User Experience (UX) preservation

Keep the user in the loop by making the iframe reload process slick and indiscernible.

Respecting policy boundaries

Remember that cross-domain iframes pose restrictions. Tread carefully by resetting the src where applicable:

// Cross origin territory, tread lightly!
$('#iframeId').attr('src', $('#iframeId').attr('src'));


User-controlled refresh

Offer a user-initiated refresh trigger by placing a reload link within the iframe itself:

<!-- A quick escape route for the user -->
<a href="" target="_SELF">Refresh</a>


Structural coherence

Maintain a consistent naming pattern for iframe ids and classes for efficient scripting and styling.

Automatic Reload vs. User intervention

Decide on the best trigger for a refresh, either automated or user-triggered, and align your coding strategy.