Breaking Out of Frames JavaScript

Don't let another website frame yours. Break out of it!


Breaking Out of Frames JavaScript

by Christopher Heng, thesitewizard.com

Are you fed up of having your website trapped in some other site's frame? This article provides a few methods whereby you can provide your visitors with a simple way to break out of the frame. It serves as a tutorial on its own right, but also an explanation of the code generated by thesitewizard.com's Free Frame Breakout JavaScript Wizard.

The traditional method is to put a link on your page that allows your visitors to click and open the existing URL in the window without the frame. Code for such a link might look like the following:

Trapped in a frame? <a href="SamePageURL.html" target="_top">Click here</a> to break out of it.

The target="_top" attribute causes the web browser to open the document in the topmost window. This method has the disadvantage of requiring your visitors to actually read your instructions and click the link.

You can also provide a way for them to break out of frames without having to take any action themselves. One way to do this is through a JavaScript function which you can put in your <head> section, like the following:

<head>
<script language="JavaScript" type="text/javascript">
<!--
function breakout_of_frame()
{
  // see http://www.thesitewizard.com/archive/framebreak.shtml
  // for an explanation of this script and how to use it on your
  // own website
  if (top.location != location) {
    top.location.href = document.location.href ;
  }
}
-->
</script>
</head>

Alternatively, you can put the following in a file called (say) "scripts.js" and load it from every page. I do this at thesitewizard.com since it allows me to maintain one copy of the script even though it is loaded by every page on the site.

function breakout_of_frame()
{
  // see http://www.thesitewizard.com/archive/framebreak.shtml
  // for an explanation of this script and how to use it on your
  // own website
  if (top.location != location) {
    top.location.href = document.location.href ;
  }
}

The code to include the script in your web page is:

<script src="scripts.js" language="JavaScript" type="text/javascript">
</script>

It should be placed in the <head> section of your web page.

The function breakout_of_frame() checks to see if the URL of the topmost window is the same as the URL of the current window. If it is not the same, it sets it to be that of the current window, effectively loading the URL into the top window and removing the frames.

To use the above function automatically, you will have to call the script in the "body" tag:

<body onload="breakout_of_frame()">
... (the rest of the document) ...
</body>

and voila! If your visitors have JavaScript enabled, when they enter your site, they'd be automatically rid of the irritating frame.

If you prefer to give your visitors the choice of whether to continue in a frame or to break out of it, you can put a button on your page that users can click to break out of the frame instead of using the "onload" attribute in your <body> tag. The code for the button is as follows:

<form action="dummyvalue">
<input type="button" value="Breakout of Frame"
  name="button" onclick="breakout_of_frame()" />
</form>

Such code may be useful if the frames are actually your own, and you want to allow your visitors to have a "No Frames" version of your pages without having to bother with specifically coding for it.

Happy scripting!

Update: If your website is hosted on an Apache web server, you might also be interested in using the frame blocking measures supported by modern browsers to prevent clickjacking.

Copyright 2000-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Break Out of Frames with JavaScript (Frame BreakOut Script)





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.