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.)
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.
9 responses so far ↓
1 stoimen // Sep 16, 2009 at 8:17 am
Many thanks! It works like a charm!
2 Tyson // Oct 8, 2009 at 10:10 pm
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
3 Oscar // Oct 22, 2009 at 4:44 am
Is there a way to detect/event to listen for when the iframe is closed?
4 mahemoff // Oct 24, 2009 at 11:20 pm
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.
5 Khary // Nov 4, 2009 at 11:06 pm
Doesn’t work in IE7? I dont get an event triggered in IE7
6 Jeremy // Nov 28, 2009 at 6:18 am
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)
7 toufou // Dec 2, 2009 at 9:22 am
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
8 Gary S. Weaver // Feb 12, 2010 at 5:08 pm
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.
9 Gary S. Weaver // Feb 12, 2010 at 5:22 pm
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.
Leave a Comment