¿Cómo identificar si una página web se está cargando dentro de un iframe o directamente en la ventana del navegador?

Question

Estoy escribiendo una aplicación de Facebook basada en iframe. Ahora quiero usar la misma página html para renderizar el sitio web normal y la página de lienzo dentro de Facebook. Quiero saber si puedo determinar si la página se ha cargado dentro del iframe o directamente en el navegador.

Answer 1

Los navegadores pueden bloquear el acceso a window.top debido a same origin policy. Los errores de IE también tienen lugar. Aquí está el código de trabajo:

function inIframe() { 
    try { 
     return window.self !== window.top; 
    } catch (e) { 
     return true; 
    } 
} 

top y self son ambos window objetos (junto con parent), por lo que se está viendo si la ventana es la ventana superior.

Answer 2

RoBorg es correcto, pero quería agregar una nota al margen.

En IE7/IE8 cuando Microsoft agregó pestañas a su navegador, rompieron una cosa que causará estragos en su JS si no tiene cuidado.

Imagínese este diseño de página:

MainPage.html 
    IframedPage1.html (named "foo") 
    IframedPage2.html (named "bar") 
    IframedPage3.html (named "baz") 

ahora en el marco de "baz" hace clic en un enlace (sin objetivo, cargas en el marco de "baz") que trabaja muy bien.

Si la página que se carga, vamos a llamarla special.html, usa JS para verificar si "it" tiene un marco principal llamado "bar", devolverá verdadero (esperado).

Ahora digamos que la página special.html cuando carga, comprueba el marco padre (por la existencia y su nombre, y si es "barra" se vuelven a cargar en sí en el marco de la barra. Ej

if(window.parent && window.parent.name == 'bar'){ 
    window.parent.location = self.location; 
} 

hasta aquí todo bien. Ahora viene el fallo.

permite decir en lugar de hacer clic en el enlace original como normal, y la carga de la página special.html en el "Baz" marco, medio-clic o eligió ábralo en una nueva pestaña.

Cuando esa nueva pestaña se carga (sin ningún cuadro principal).) ¡IE introducirá un bucle infinito de carga de página! porque IE "copia sobre" la estructura de marco en JavaScript de modo que la nueva pestaña TIENE un padre y ese padre TIENE el nombre "barra".

La buena noticia, es que la comprobación:

if(self == top){ 
    //this returns true! 
} 

en que la nueva ficha de vuelta verdad, y por lo tanto se puede probar esta situación extraña.

Answer 3

Como usted pregunta en el contexto de una aplicación de Facebook, es posible que desee considerar detectar esto en el servidor cuando se realiza la solicitud inicial. Facebook pasará un montón de datos de cadena de consulta, incluida la clave fb_sig_user si se llama desde un iframe.

Dado que probablemente necesite verificar y utilizar esta información de todos modos en su aplicación, utilícela para determinar el contexto apropiado para representar.

Answer 4

Utilice esta función de Javascript como ejemplo de cómo lograr esto.

function isNoIframeOrIframeInMyHost() { 
// Validation: it must be loaded as the top page, or if it is loaded in an iframe 
// then it must be embedded in my own domain. 
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe 
// and the domains are different. 
var myresult = true; 
try { 
    var tophref = top.location.href; 
    var tophostname = top.location.hostname.toString(); 
    var myhref = location.href; 
    if (tophref === myhref) { 
     myresult = true; 
    } else if (tophostname !== "www.yourdomain.com") { 
     myresult = false; 
    } 
} catch (error) { 
    // error is a permission error that top.location.href is not accessible 
    // (which means parent domain <> iframe domain)! 
    myresult = false; 
} 
return myresult; 
} 

Answer 5

La respuesta aceptada no funcionó para mí dentro de la escritura de contenido de una extensión de Firefox 6.0 (Addon-SDK 1.0): Firefox ejecuta la secuencia de comandos contenidos en cada uno: la ventana de nivel superior y en todos los marcos flotantes.

Dentro de la escritura de contenido consigo los siguientes resultados:

(window !== window.top) : false 
(window.self !== window.top) : true 

Lo extraño de esta salida es que es siempre el mismo, independientemente de si el código se ejecuta dentro de una la ventana de nivel superior de marco flotante o.

Por otro lado, Google Chrome parece ejecutar mi script de contenido solo una vez dentro de la ventana de nivel superior, por lo que lo anterior no funcionaría en absoluto.

Lo que finalmente trabajó para mí en un script contenido en ambos navegadores es la siguiente:

console.log(window.frames.length + ':' + parent.frames.length); 

Sin iframes Esto imprime 0:0, en una ventana de nivel superior que contiene un cuadro que imprime 1:1, y en el único iframe de un documento imprime 0:1.

Esto permite a mi extensión determinar en ambos navegadores si hay algún iframes presente, y adicionalmente en Firefox si se ejecuta dentro de uno de los iframes.

Answer 6

Es una antigua pieza de código que he usado un par de veces:

if (parent.location.href == self.location.href) { 
    window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468'; 
} 

Answer 7

estoy usando esto:

var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1); 

Answer 8

if (window.frames.length != parent.frames.length) { page loaded in iframe } 

Pero sólo si el número de marcos flotantes difiere en su página y página que lo están cargando en iframe. No nos iframe en tu sitio para tener garantía del 100% del resultado de este código

Answer 9

escribir este JavaScript en cada página

if (self == top) 
    { window.location = "Home.aspx"; } 

entonces se redirige automáticamente a la página principal.

Answer 10

Si desea saber si el usuario está accediendo a su aplicación desde la pestaña de la página de Facebook o el lienzo, compruebe la Solicitud firmada. Si no lo obtiene, probablemente el usuario no esté accediendo desde Facebook. Para asegurarse de confirmar la estructura de los campos signed_request y el contenido de los campos.

Con el php-SDK se puede obtener la solicitud firmada así:

$signed_request = $facebook->getSignedRequest(); 

Puede leer más sobre solicitud firmada aquí:

https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/

y aquí:

https://developers.facebook.com/docs/reference/login/signed-request/

Answer 11

window.frameElement Devuelve el elemento (como <iframe> o <objeto>) en el que está incrustada la ventana, o nulo si la ventana está en el nivel superior. Así código de identificación parece

if (window.frameElement) { 
    // in frame 
} 
else { 
    // not in frame 
} 

This is standard and rather new method. Funciona exactamente en Chrome y Firefox. No puedo recomendarlo como una solución universal, pero debería mencionarse aquí, creo.

Answer 12

if(typeof(parent) == 'undefined') { 
    console.log('Not Iframe'); 
} 
else { 
    console.log('iframe'); 
} 

Answer 13

No estoy seguro de cómo funciona este ejemplo para los más viejos navegadores web pero yo lo uso para IE, Firefox y Chrome sin y número:

var iFrameDetection = (window === window.parent) ? false : true;