Unobtrusive iFrame with JQuery
I couldn't find a great way to do an iframe in an xhtml site and still 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.
References: malsup’s media plugins
Great idea! Nice job.
How does adding the iframe with JavaScript make the iframe more accessible? The DOM is the same in the end.
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)
How is that better then:
<iframe …>
<p><a href=”…”>…</a></p>
</iframe>
… 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.
< 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.
Install Opera. Tools > Preferences > Content > Style Options and turn off iframe there.
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.
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…)
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
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?
$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.
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
hi – upgrade to firefox 2…. it’s free, you know