jQuery snippet: How to make links break frames

October 3, 2008

in Programming

Here’s a quick lunch time post to share a simple snippet.

It’s no new technology to have a page break out of frames when they’re not supposed to be in frames. But what if you do want the page to appear in a frame and only break the frame if a link is clicked? Well then we turn to our trusty jQuery and use this little code snippet:

  1. if (top.frames.length != 0) {
  2.    $("a").click(function(){
  3.       this.target = "_parent";
  4.    });
  5. }

Why would you want to do this? That’s a fair question. For one of our clients at work they embed the header from their site onto the page for a site which sells merchandise for them. Now, we could have created a separate header but then when the header gets updated it needs to be changed in two places. This way it’s just one header file to maintain.

Hopefully this saves other developers ten minutes of their lives.

{ 2 comments… read them below or add one }

Vurcease October 3, 2008 at 11:52 am

Cool trick. I love the whole idea of using JavaScript to alter the loaded HTML document after it's been loaded. It's better for SEO, too, to mow through the code post-load and add things like onclick to links of certain classes, etc. Such a powerful approach, and as you've shown with this snippet, very practical!

trickjarrett October 3, 2008 at 12:08 pm

Thanks man. With the upcoming improvements to the power of Javascript
and the speed at which they're going to be running, modifying a page
after load is becoming quite trivial. Little did they know Javascript
was going to change the world ;)

Leave a Comment

Previous post:

Next post: