jQuery snippet: How to make links break frames

Here’s a quick lunch time post to share a sim­ple snippet.

It’s no new tech­nol­ogy to have a page break out of frames when they’re not sup­posed 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 lit­tle code snippet:

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

Why would you want to do this? That’s a fair ques­tion. For one of our clients at work they embed the header from their site onto the page for a site which sells mer­chan­dise for them. Now, we could have cre­ated a sep­a­rate 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.

Hope­fully this saves other devel­op­ers ten min­utes of their lives.

Discussion

  1. Vurcease says:

    Cool trick. I love the whole idea of using JavaScript to alter the loaded HTML doc­u­ment after it’s been loaded. It’s bet­ter for SEO, too, to mow through the code post-load and add things like onclick to links of cer­tain classes, etc. Such a pow­er­ful approach, and as you’ve shown with this snip­pet, very practical!

  2. trickjarrett says:

    Thanks man. With the upcom­ing improve­ments to the power of Javascript
    and the speed at which they’re going to be run­ning, mod­i­fy­ing a page
    after load is becom­ing quite triv­ial. Lit­tle did they know Javascript
    was going to change the world ;)

Add a Comment

*

* Copy this password:

* Type or paste password here:

*