HTML Frames Notes Plus
Published Tuesday, August 29, 2006 @ 9:28 am • 0 Responses
If you think that nobody uses frames anymore, think again. I personally know of one person who threw down some tuf 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 ineffectually pathetic bastard:
<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 in all non-NN browsers:
<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 for Monzilla Media (monzilla.biz):
<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 and scroll attributes for iframes via CSS
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>This method works on all IE 4+ with the following exceptions:
IE 4
- Ignores overflow on html and body elements (i.e., no scrollbar elimination in IE 4)
- Border property must be applied to the body element
IE 5 and IE 5.5
- Overflow property must be applied to the body element
- Border property may be applied to either the html or the body element
IE 6 / Quirks Mode (Transitional DTD)
- Overflow property must be applied to the body element
- Border property may be applied to either the html or the body element
IE 6 / Standards Mode (Transitional DTD)
- Overflow property must be applied to the html element
- Border property must be applied to the html element
← Previous post • Next post →
« CSS Code Repository • Optimize Convoluted Code via JavaScript »