Mostrar la página de manera diferente (css) si dentro de iframe

Question

¿Hay alguna manera de, como el título dice "Mostrar página de manera diferente (css) si dentro de iframe". Estoy buscando un método jQuery/JavaScript para utilizar potencialmente una hoja de estilos css diferente si el sitio está dentro de un iframe. ¿Algunas ideas?

Answer 1

Puede inject una hoja de estilos diferente si la ventana no es top window.

if (window.top!=window.self) 
{ 
    // In a Frame or IFrame 
} 
else 
{ 
    // Not in a frame 
} 

Answer 2

if(self != top) { 
    headTag = document.getElementsByTagName("head")[0].innerHTML; 
    var frameCSS = headTag + '<style type="text/css">**insert CSS here**</style>'; 
    document.getElementsByTagName('head')[0].innerHTML = frameCSS; 
} 

Si la página es la única página que se muestra, la parte superior, padre, auto y la ventana serán iguales. Si la página se mantiene dentro de un conjunto de marcos, self y top no serán iguales. Si la página es la que contiene el conjunto de marcos y no se está reteniendo dentro de un conjunto de marcos, self y top serán iguales.

Answer 3

En lugar de insertar una nueva hoja de estilo, le sugiero que agregue una clase de CSS a body.

ejemplo jQuery:

$(function() { 
    if (window.self != window.top) { 
    $(document.body).addClass("in-iframe"); 
    } 
}); 

Ahora puede estilo de cosas de manera diferente, como

.in-iframe p { 
    background: purple; 
} 

Answer 4

Aquí es un enfoque rápido y amigable diseñador usando JS vainilla. Solo una línea de JS y la apariencia se pueden controlar desde CSS/SASS/LESS.

Coloque este dentro del elemento head antes de cualquier CSS o JS se carga:

// Sets the class of the HTML element using vanilla JavaScript 
document.documentElement.className += (window.self == window.top ? " top" : " framed"); 

Luego, en el CSS/SASS/menos se puede ocultar, mostrar, y ajustar en base a los cuales se aplicó clase.

/* Hide site navigation when in an iframe */ 
html.framed .site-nav, 
html.framed .site-footer { 
    display: none; 
} 

PSA: Considere aprovechando la X-Frame-Options para mantener su duro trabajo de ser secuestrado.