JQuery IFrame Plugin

This article by Nick Zakas, covering some technical issues in iframe loading, triggered me to surface a JQuery IFrame plugin I made a little while ago, which supports loading IFrames. (I did tweet it at the time, though I’ve since changed the location.)

JQuery IFrame plugin

The plugin basically tells you, the programmer of the parent document, when your child iframe has loaded. It also has some other bells and whistles, like timing the load duration.

It’s inspired by the use cases of WebWait (http://webwait.com) and the Scrumptious trails player (http://scrumptious.tv). Both are applications whose whole mission in life is to open up an external page in an iframe, and do something when it has loaded.

There’s already an IFrame JQuery plugin, but it’s to do with controlling what’s inside the iframe, i.e. the situation which is only possible when the iframes are from the same domain. What I’m dealing with here is the parent knowing when the iframe is loaded, regardless of when it comes from and agnostic to what it does.

20 thoughts on JQuery IFrame Plugin

  1. I found the link here is broken to download the plugin, could you please send it to my email or arrange some way for me to get the plugin.

    This is exactly what i have been looking for and I’m desperately in need of it. Please get back to me as soon as you can.

    Cheers Tyson

  2. Tyson, the link works afaict. Click on the big fat download button once you click through to the demo page.

    Oscar, I’m not sure what you mean – it’s an iframe, so the only way it can be closed is for the outer page to do it – so you’d be listening to events you already know about because you’re the one making them happen. If you mean, can you detect if the user clicks through to another site – I wrote a bit about this in my recent article on top bars…the answer is “not possible” with modern browsers.

  3. Just wanted to let you know that the iframe should be returned and the end of the plugin. Not doing this breaks jQuery chaining. Thanks for the plugin!

    (spent a bit trying to figure out why it wasn’t working)

  4. Hi, Thanks for this simply to use and fonctionnal plugin! This plugin seems to have a limitation for my use. On my website, i have 3 iframe but with your plugin, i think i can just use it with one iframe. Am i wrong? If yes, how can i do to use it with others iframe? I want to load differents contents in differents iframes .

    Thancks for your help. Have a good day. TouFou

  5. Thanks for writing this. One note so far though is that in the example page ( http://project.mahemoff.com/jquery-iframe/ ), it seems to not follow redirects in Safari 4.0.4 in OS X 10.6.2. Specifically, I pointed it at an internal site that uses a meta refresh to redirect from http://host.domain/ to https:/host.domain/app/ (like <meta http-equiv=”refresh” content=”0;url=https://host.domain/app/” />) and didn’t load the content into the iframe.

  6. It might also have to do with the browser being delayed by having to agree to a self-signed cert. Not sure. I accepted the cert, viewed the page, closed Safari, reopened and was able to repeat the issue of it not redirecting though. I’m guessing it is a problem with iframes in Safari rather than this plugin, though.

  7. Your jquery-iframe plugin was causing a JavaScript error in IE 6 “Expected identifier, string or number”.

    This is a simple fix on line 66, just remove the comma where you are declaring the default values:-

    WAS: var defaults = { timeoutDuration: 0, timeout: null, }

    CHANGE TO: var defaults = { timeoutDuration: 0, timeout: null };

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>