Unobtrusive iFrame with JQuery

I couldn’t find a great way to do an iframe in an xhtml site and stil maintain accessibility - until I came across malsup’s media plugins. They basically create a link to the swf, mp3, or quicktime and replace the link with the content via a custom class on the href tag.

So, I figured, what a great way to do an iframe, too. Something like:

<a href="myiframe.html" class="iframe">Iframe Content</a>

I passed along the idea to my programming genius, Vlada and he came up with a great jquery iframe plugin by modifying malsup’s swf plugin.

<a href="http://33rockers.com" class="iframe w:700 h:300" >Iframe Content</a>

makes this…
<div class=iframe><iframe id=content_iframe marginWidth=0 marginHeight=0 src="http://33rockers.com/" frameBorder=0 width=640 height=480></iframe></div>

You can also set the defaults in jquery_iframe.js and just use
<a href="http://33rockers.com" class="iframe" >Iframe Content</a>

If javascript is turned off, it will just show a link to the content.

Here is the code in action and u can download the source code here.

About this entry

You’re currently reading “Unobtrusive iFrame with JQuery,” an entry on 33Rockers

Published:: 12.05.06 / 10am

Category:: Jot Down

malsup December 11, 2006

Great idea! Nice job.

David Dorward December 14, 2006

How does adding the iframe with JavaScript make the iframe more accessible? The DOM is the same in the end.

33rockers December 14, 2006

if javascript is turned off, the iframe is a link to the iframe content url. Creating Accessible JavaScript

How is that better then:

…

… where if JavaScript is turned off, the user still gets the iframe, and they only get the fallback to the link if iframes are turned off or not supported.

(Attempt 2. The comment system modified my comment and doesn’t have a preview facility)

< iframe> does not validate xhtml strict.

Also - I think the code is cleaner.

True, but:

That isn’t an accessibility issue
You are using Transitional on this site
Hiding code from the validator by adding it with JavaScript rather misses the point of using valid code

Incidently, at the time of writing, this page isn’t valid.

Also not an accessibility issue.

It just occurred to me, and I’ve tested it, that your solution is actually less accessible then I thought.

If a browser has JavaScript turned on, but iframes turned off, then the link will be replaced by an iframe and then the iframe will be ignored.

So such users get no content at all.

Hi David-
As you may have read, I just took over this site. Apart from changing some graphics and modifying a few things, I have not messed with the code much.

For sites I design from the ground up, and the CMS I am working on, I try to stick to XHTML strict.

Another reason that this script is important to me is that I use <a href=”http://jimandlissa.com/project/textilephp”> textilePHP</a> in my CMS. So, by simply adding an iframe class to the link, the client/user can create an iframe very simply.

that’s interesting. can u show me how to mimic this so that I can test it? thanks.

can u show me how to mimic this so that I can test it?

Install Opera. Tools > Preferences > Content > Style Options and turn off iframe there.

Another reason that this script is important to me is that I use textilePHP in my CMS. So, by simply adding an iframe class to the link, the client/user can create an iframe very simply.

That functionality could be built into the CMS and handled server side.

ok - so this is an Opera only issue? Maybe there is some script to detect iframe support in Opera. I will check into it.

Opera is the only browser I know which provides that facility. That doesn’t mean it isn’t possible in other browsers.

gumbah January 16, 2007

The demo has a bug (or so it seems: i am getting a “$this.id is not a function” javascript in FireFox 1.5, and in ie it’s not working either…)

drewish January 26, 2007

Ditto what gumbah said. With FF 2.0 I’m getting:
Error: $this.id is not a function
Source File: http://33rockers.com/js/jquery_iframe.js
Line: 60

Josh February 21, 2007

If I follow links, eventually I can surft to where the page reloads and I am no longer on the 33rockers site. Is there any way around this? A way that the page will maintain its integrety no matter what?

33rockers February 21, 2007

$this.id error is fixed. this happened when jquery was updated, since I link to the source on their site.
–

josh- I am unclear as to your meaning. You want to prevent people from leaving the page that is loaded inside the iframe? a good implementation of an iframe blends into the surrounding page and has no links that would take the reader to another site. Here is an example of an iframe I did:

http://oakgroverealty.com/search-mls

Sorry for the misunderstanding. What I meant was that within the iframe demo on the 33rockers site, I can surf to, for instance, google ads. When I do this, the iframe “breaks” and the whole page is “google ads.” Is there a way to keep, in this case, google ads, within the iframe? Thanks for the quick response and hope this clarifies my question.

ah - there is a setting within your adsense account that you can tell google that your ads will be in a frame. This would apply to iframes, too.

But is there a way to force this fix for any website, not just google adds. Many sites, for instance the University of Michigan website, reload over the iframe. Do you know of any ajax fix to prevent this; to force any new site into the iframe.

ha - no, I’m afraid not. as far as I know, a frame breaker will also break out of an iframe. buggers.

philou April 23, 2007

Hi, is no whork for me with firefox 1.5
2 errors in debug mode:

jQuery is not defined
http://33rockers.com/js/jquery_iframe.js
Line: 45

$ is not defined
http://33rockers.com/jquery/iframe-demo/
Line: 10

Thank’s

33rockers May 28, 2007

hi - upgrade to firefox 2…. it’s free, you know

33Rockers

Unobtrusive iFrame with JQuery

About this entry

23 Comments

Post a Comment »

Comment Guidelines

About

Recently

Monthly Archives

Pages

Worthy Visits