Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

How do I use JavaScript to break out of frames?

I'm really upset. I was just visiting a competitors Web site and found out that they had links to my FAQ pages, but when you clicked on the links, their "frame" neatly wrapped my content, which made it seem like it was their content, not mine. That stinks, and I want to know if there's a way that I can kill or prevent this from happening to my Web pages?

Dave's Answer:

There is a pretty simple solution, fortunately, because the original Web designers recognized that while having multiple pages displayed as one "montage" or "frameset" offered lots of cool design features, it would also make sites susceptible to unauthorized framing with the same HTML sequence.

To create a frameset, you use a combination of <frameset> and <frame> and there are plenty of examples of how to accomplish that online and in my popular book Creating Cool Web Sites, but let's look at the other half of the coin, what you're asking.

The trick is to delve into JavaScript, the scripting language of Web pages. Don't worry, though, what we're doing isn't that complex, and I'm sure you can handle it!

Open up one of your Web pages and all you need to do is drop in a small JavaScript snippet surrounded by <script language="javascript"> and </script>, like this:

That's all there is to it. Now when that page is included in a frames-based layout, it will automatically "bust through" all the frames and force itself to be the topmost window. Hope that helps out!

Thanks to Dori Smith of JavaScript World.com for her tip on this splendidly efficient solution.

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Categorized: CGI Scripts and Web Site Programming , HTML and CSS (Article 6721)
Tagged: frames, framesets, html layout, javascript
Previous: How do I delete a friend from MySpace?
Next: How do I organize my Hotmail folders?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

This is great. I've seen this solution before. My question is: What about the three* people out there who have javascript disabled? Is there a non-java solution or are we just happy that we're hitting 97%+* of all web users?

* I don't have real numbers. I pulled these out of the air.

Posted by: Dustin L. at August 10, 2006 1:57 PM

Dustin, I honestly don't know if you can break out of frames if someone has JavaScript disabled. Perhaps someone else can pop up with an answer for this?

Posted by: Dave Taylor at August 11, 2006 8:16 AM

I don't think you can "break out of frames" without some scripting support in the client's browser.

However, you may be able to use server side includes (basically, running scripts on the machine hosting your site, rather than in the client's browser) and HTTP_REFERRER to replace the content of the page if the referrer is the competitor's site. (I've seen people do this with images on their sites, and the image that appears on the other site's page usually has some message about "an attempt to steal bandwidth".)

Another possibility is to simply rename the page on your site, and replace the old page with one that explains what happened. Obviously, people who bookmarked your page will need to update their bookmarks, but people seeing your file on the competitor's site will be notified as to what's going on as well.

Posted by: Ken at August 11, 2006 11:02 AM

Thanks for the code, its great for my blog.

ravs.us

Posted by: Ravi Gupta at December 26, 2006 12:18 AM

Grrrrrrrrrrrrreat code! Thanks!

Posted by: Luiz at January 24, 2009 5:05 AM

Hi!

This snippet is very useful, but what if I want for a certain site not to be frame breaked?

I mean, I want to allow only one site to frame mine, all other should be break.

How can I do?

Thanks in avance.

Posted by: JR at July 4, 2009 1:25 PM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!