Basicamente ocultas el contenido cuando tu creas la pagina. Este metodo no se puede aplicar cuando enlazas una pagina ajena, lo sorprendente es que cuando visitas tu pagina todo es completamente funcional, solo cuando se visita dentro de un iframe es cuando el contenido se oculta .
1.- Supogamos que tienes esta pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="contenido">
Contenido
</div>
<div id="footer">
Footer
</div>
<!-- Pega aqui el codigo -->
</body>
</html>
2 -Antes de la etiqueta de cierra </body> pega todo el siguiente codigo:
<script type="text/javascript">
//<![CDATA[
if (top !== self) {
//alert('en Iframe');
document.getElementById('contenido').style.display = 'none';
}
//]]>
</script>
El script es el encargado de hacer la funcion de ocultamiento dentro de los iframes. En este caso ocultara la seccion contenido.
Ahora queda solo aprovechar y desarrolla este codigo.
Obtenido en www.forosdelweb.com
Adición de un nodo de estilo al DOM
otro metodo es el siguiente, es mas completo ya que se asimila mucho al css:
<script type="text/javascript">
function appendStyle(styles) {
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = styles;
else css.appendChild(document.createTextNode(styles));
document.getElementsByTagName("head")[0].appendChild(css);
}
var styles = '.header { color: red; font-size: 40px; font-family: Verdana, sans; }';
styles += '.content { color: blue; text-align: left; }';
window.onload = function() { appendStyle(styles) };
</script>
Para agregar mas estilos solo debemos incluir el siguiente codico y configurarlo:
styles += 'X { XX }';
This is an example file from Appending Style Nodes with Javascript by Jon Raasch.