HTML Frames Notes Plus

Updated January 13, 2025

If you think that nobody uses frames anymore, think again. I personally know of one person who threw down some tuff HTML frame action for a personal site. So, in the interest of prosperity, we are hereby establishing this post as our official dumping ground for all HTML frame-related garbage.

Break your pages out of someone else’s frames

We begin our journey with a totally sick JavaScript method for breaking pages out of the illegitimate frames of some pathetic ineffectual mouth-breather:

if (window.self ! = window.top) window.top.location = window.self.location;

Likewise, here is an equally effective method that should work in all JS-enabled browsers:

if (window.frames) {
	if (parent != self) {
		location.href="index.html"
	}
}

Alternatively, this method also works well:

if (parent.frames.length > 0) {
	parent.location.href = location.href;
}

Here is a similar version of the previous method:

if (parent.frames.length > 0) top.location.replace(document.location);

Here is yet another slightly similar version:

if (top.frames.length > 0) top.location = self.location;

Yet another fine method for breaking out of frames:

if ( top.location != document.location.href ) top.location = document.location.href;

Here is the script we use at Monzilla Media:

if ( self.location.href != top.location.href ) top.location.href = self.location.href;

This method stops recursively framed pages:

if ( window != top ) top.location.href = window.location.href;

This method works great at breaking out and redirecting the browser to the original page:

var parent_location = new String(parent.location);
if ( ( top.location != location ) && parent_location.indexOf('http://domain.tld/path/to/page.html') != 0 ) top.location.href = document.location.href;

Optimize the content of an iframe

Moving right along, here is a helpful method for optimizing the content of an <iframe>. This code basically displays a link to the content that should be displayed if everything is working correctly. If for some reason the content is not displayed, the link will appear in its place, thereby enabling users to access the missing content via a new window:

<iframe src="page.html" width="333" height="333" scrolling="auto" frameborder="1">
	<a href="page.html" target="_blank">
		[Your browser does not support frames or is configured not to display frames. Click here to visit the related document.]
	</a>
</iframe>

Control frameborder & scroll properties for iframe

To control the frameborder="value" and scroll="yes/no" attributes for iframes using CSS, add the following styles to the document which is being displayed in the iframe:

html, body {
	overflow: hidden;
	border: none;
}