inFrame: Open Links in Iframes with jQuery

Say I had some CSS or JavaScript techniques/effects I wanted to show in a blog post. Obviously it would have been uncomfortable for me to actually include the thing in the post (CSS needs to be in the head, JavaScript may conflict with other JavaScript, etc), so the best option would have been to just link to the file demonstrating the effect. Using inFrame the reader doesn’t have to go away from the blog post to view demo files… just add a class of inframe to each of these links. In the second Official jQuery Podcast Ralph Whitbeck, Elijah Manor and their guest Richard D. Worth go through what inFrame is and when/why it’s useful:

The JavaScript

Click “Result” below for a demo.

$(document).ready(function() {
	/*
		inFrame - Keep Demos Inside the Page with jQuery
		- affects all the links with a class of 'inframe'
		- set a rel attribute like rel="height:400px" on the link for a 400px high iframe
		- if you don't set a height, default is 550px
	*/
	$('a.inframe').click(function() {
		var e=$(this);
 
		if (!e.data('state')) {	//if state is undefined
 
			e.data('state','open'); //set the state to 'open'
 
			// Extract the frame height from the rel attribute
			var frameHeight=e.attr('rel');
			var pat1 = new RegExp('height:');
			pat1.test(frameHeight);
			frameHeight=RegExp.rightContext;
			var pat2 = new RegExp('px');
			pat2.test(frameHeight);
			frameHeight = RegExp.leftContext;
			if ( !frameHeight || (Math.ceil(frameHeight)!=Math.floor(frameHeight)) ) {
				//if it's null or not an integer
				frameHeight = '550'; //default frame height, in case none is specified
			};
 
			// Insert the iframe just after the link
			e.after('<iframe style="height:'+frameHeight+'px; " src=' + e.attr('href') + ' frameborder="0" ></iframe>');
			var iframe=e.next('iframe');
 
			// Insert the "loading..." text
			iframe.before(' <small class="quiet"> Loading...</small>')
			iframe.load(function(){	//once content was loaded
				iframe.slideDown(500);	//slide it down
				iframe.prev('small').remove();	//remove the 'loading...'
			});
			e.attr('title','Hide');	//set the link title to 'Hide'
		}
		else if(e.data('state')=='closed') { //if state is 'closed'
			e.data('state', 'open');
			e.next('iframe').slideDown(500);
			e.attr('title','Hide');
		}
		else if(e.data('state')=='open') { //if state is 'open'
			e.data('state', 'closed');
			e.next('iframe').slideUp(500);
			e.attr('title','Show');
		}
		return false;
	});
});

See the Pen inFrame by Stefan Matei (@nonsalant) on CodePen.


 

Update: Need styles?

These are the CSS styles I’m using:

.inframe + iframe {
	box-shadow: 1px 1px 6px #ccc;
	padding:5px;
	margin-right:-10px;
	bakground:#fff;
	border-radius: 0 0 10px 10px;
}
.inframe:hover {
	text-decoration: none;
}
.inframe:after {
	content:"↓";
	margin-left:3px;
	position:relative;
	top:-1px;
}
.inframe:hover:after {
	top:2px;
	text-decoration: none;
}

Paste them in your style sheet to apply the same effect you see on this page.

How to Use it

Include jQuery and the inFrame script above. Add a class of inframe to all the links you wish to apply it to. Like this:

<a href="http://vileworks.com" class="inframe">VileWorks</a>

The default height is 550px, but if you want to specify it for a link, you can do so using the relattribute:

<a href="http://vileworks.com" rel="height:300px" class="inframe">VileWorks</a>

Please note that there’s no space between “height” and “300px” and you can’t specify the height in ems or in percents. If you already have other rel attributes you want to use, like nofollow or external, you can include those too.

<a href="http://vileworks.com" rel="nofollow height:300px" class="inframe">Vile</a>

Features

  • Tested in IE6, IE7, Firefox 3, Safari 3, Google Chrome, Opera on a PC. And Safari on iPhone.
  • Degrades gracefully (to regular links) when JavaScript is turned off.
  • SEO friendly with the files you link to.

Even though they’re iframes which are usually very bad for findability, usability, accessibility and other words ending in ‘-bility’, they’re not bad in this case because the links are still there, with their hrefs and everything looking all natural — so search engines that crawl your site and people with no javascript won’t feel any difference.

Posted in blog Tagged with: , , , ,
17 comments on “inFrame: Open Links in Iframes with jQuery
  1. Paul Datta says:

    I did something similar once on a project but didn’t think of making it a plugin -> good job ;)

  2. horia says:

    How do i make the iframe the same height as the loaded page ?

  3. Stefan says:

    @horia: You could try combining it with something like this: http://www.mattcutts.com/blog/iframe-height-scrollbar-example/

    I tried something similar when I made the script but it didn’t turn out too well.

  4. kevin says:

    A bit long to load on my computer even though am using chrome, but pretty interesting.

  5. HullDO says:

    This is an excellent script which will definitely be very useful. Thanks.

  6. iframes ! welcome says:

    http://www.thespanner.co.uk/2007/10/24/iframes-security-summary/

    Please note comment 9 and 10 on that page other than that the security risk is to high to use external pages as iframes.

    Thus you might be passing exploits around!

    cheers

  7. Ken says:

    Terrific. As always.

  8. Stefan says:

    @iframes ! welcome: you’re safe as long as you can be sure that what you’re putting in the iframe is safe.

  9. Check Spelling says:

    Well I like this very much. Cool idea even with iframes.

  10. Sedat Kumcu says:

    @Nathan J. Brauer:
    It’s work fine on Chrome 3.0.195.25

  11. Fred says:

    thank you, very interesting idea

  12. Kamran says:

    Very nice idea keep it up dude !

    Hi i am Kamran a freelance web developer using JQuery Codeignier CSS to create more dynamic and interactive web sites on low price.

  13. super programmiert ;-)
    cool idea

  14. This will very helpful for me.Thanks.

  15. khaled says:

    really!!! very good
    Awesome snippet of code. It really is useful and beautiful.
    thanks for sharing this i will use it my upcoming website
    Regards

  16. Omar Trujillo says:

    This is helped me a lot developing my website

5 Pings/Trackbacks for "inFrame: Open Links in Iframes with jQuery"
  1. Inserire le demo di uno script all’interno di una pagina con inFrame « TagTagWeb says:

    [...] inFrame il lettore non dovrà cambiare pagina per visualizzare la demo, per fare questo basta inserire un [...]

  2. [...] 5. inFrame: Keep Demos Inside the Page with jQuery [...]

  3. Embed CSS/HTML/javascript demos on blog posts using jQuery says:

    [...] e.attr('title','Show'); } return false; }); }); Find the required javascript and CSS at http://www.vileworks.com/inframe-keep-the-demos-inside-the-page-with-jqueryMost Commented PostsAjax File upload – Jquery Plugin (34)Using Jquery – Check boxes and [...]

  4. [...] jQuery spends a lot of time impressing the shit out of me, one example of it doing it recently is with Vile Work’s inFrame [...]

  5. [...] inFrame, we can keep demos indisde the page. So that, the reader doesn’t have to go away from the [...]