JavaScripts
Frames Buster
Grizzly WebMaster home
 Grizzly WebMaster (HOME) >> JavaScripts >> Frames Buster
See Also
See "Frames Required" for techniques of requiring a frames-context for web-page content.
Often a web-site wants to protect its pages from being enclosed in a frame from some other web-site.  This can be easily be done by adding a small piece of JavaScript at the beginning of your page.

Version 1

Our first (and preferred) version "replaces" the frame with our page.  This means that our site visitor will not be frustrated by our frame-busting entering an additional entry in their browsing history.

It should be noted that when this script executes (depending on network speed and your system speed) you may not see the frames page for more than a fraction of a second (if at all).

See this script in action (frames) - (iframes)


<html>

<head>
<title>Frames Buster Example-1</title>
<!--
    We provide the "window-target" meta-tag for those few
    browsers that honor the tag.  If the browser supports
    the tag then it will the handle breaking out of frames.
-->
<meta http-equiv="window-target" content="_top">
<script language="JavaScript">
<!--
var sThisURL = unescape(window.location.pathname);

function doFramesBuster()
{
    //  This function is the key to breaking out of frames.
    //  All of the rest of the stuff is to gracefully deal
    //  with the browser's history.
    //
    if ( top != self )
        breakFrames();
}

//  It is important to note that there are two implementations
//  of the "breakFrames" function.  One in this JavaScript
//  block and the second in the JavaScript1.1 block.  Only one
//  of the implementations will actually be used.  If the
//  browser supports JavaScript 1.1 or later then only the
//  second implementation will be used.
//
function breakFrames()
{
    //  The JavaScript 1.0 version of this function supports
    //  browsers that don't have the ability to replace this
    //  file in the browser history.  As a result we want to
    //  make sure that we briefly delay so when the visitor
    //  is moving back through their browser-history they
    //  will have time to press the back-button on this page
    //  before the script moves them to the redirection
    //  target page again.
    //
    //  This form of changing location "does" add to the
    //  browser's history, but since we are dealing with
    //  JavaScript 1.0 we can't do much about it.
    //
    setTimeout( "top.location.href = sThisURL", 1.5*1000 );
}

//-->
</script>
<script language="JavaScript1.1">
<!--
function breakFrames()
{
    //  JavaScript 1.1 added the 'replace' function on the
    //  location object so we can change locations without
    //  adding to the browser's history.
    //
    top.location.replace( sThisURL );
}

//  Please note that we define the breakFrames() function before
//  the next code.  This is important since this code may execute
//  "before" the page finishes loading.

// if we are not the top frame we want to bust out
//  Please note that we test for MSIE (Internet Explorer)
//  this is because Netscape has problems with partially
//  loading a page and then reloading.  Their cache gets
//  confussed.  As a result we call the do-frames-buster
//  function from the onload event as well.
//
if ( "MSIE" == navigator.appName )
    doFramesBuster();

//-->
</script>
</head>

<!--
    In addition to the check we did above, we also call
    the frames-buster code from the onload event.  This
    handles all of the non-MSIE browsers.
-->
<body onload="doFramesBuster()">

<p>Document that should be displayed without any frames</p>


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </body>

</html>
Here is exactly the same JavaScript frames-buster file but without all of the comments.  This is provided to let you see that this really is a small and clean solution.

<html>

<head>
<title>Frames Buster Example-1 Sans-Comments</title>
<meta http-equiv="window-target" content="_top">
<script language="JavaScript">
<!--
var sThisURL = unescape(window.location.pathname);

function doFramesBuster()
{
    if ( top.location != self.location )
        breakFrames();
}

function breakFrames()
{
    setTimeout( "top.location.href = sThisURL", 1.5*1000 );
}
//-->
</script>
<script language="JavaScript1.1">
<!--
function breakFrames()
{
    top.location.replace( sThisURL );
}

if ( "MSIE" == navigator.appName )
    doFramesBuster();

//-->
</script>
</head>

<body onload="doFramesBuster()">

<p>Document that should be displayed without any frames</p>


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 </body>

</html>

Version 2

The second version is smaller but adds an entry into our site visitor's browser history.

See this script in action.


<html>

<head>
<title>Frames Buster Example-2</title>
<script language="JavaScript">
<!--

// we check to see if we are the top window
if ( top != self )
{
    top.location.href = unescape(window.location.pathname);
}

//-->
</script>
</head>

<body>

<p>Document that should be displayed without any frames</p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </body>

</html>
Service Provided by Bear Consulting Group Last modified: 25 May 2009
Copyright 2001 Bear Consulting Group