New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

HTML Frames Notes Plus

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:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

	if (window.self ! = window.top) window.top.location = window.self.location;
	
//--><!]]>
</script>

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

<script type="text/javascript">
<!--//--><![CDATA[//><!--

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

//--><!]]>
</script>

Alternatively, this method also works well:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

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

//--><!]]>
</script>

Here is a similar version of the previous method:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

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

//--><!]]>
</script>

Here is yet another slightly similar version:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

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

//--><!]]>
</script>

Yet another fine method for breaking out of frames:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

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

//--><!]]>
</script>

Here is the script we use at Monzilla Media:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

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

//--><!]]>
</script>

This method stops recursively framed pages:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

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

//--><!]]>
</script>

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

<script type="text/javascript">
<!--//--><![CDATA[//><!--

	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;

//--><!]]>
</script>

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:

<style type="text/css">
	html, body {
		overflow: hidden;
		border: none;
	}
</style>

See also: Break Out of Frames

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
Banhammer: Protect your WordPress site against threats.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.