2010-06-23 19 views
15

He creado una página de fans en facebook aquí:jQuery/iframe no funciona en Chrome

http://www.facebook.com/apps/application.php?id=120196931351044&v=app_120196931351044

Incorpora iframes para llamar a ciertas páginas/Galerías de imágenes que utilizan jQuery. Todo funciona bien en todos los navegadores excepto en Chrome. No se muestra nada en Chrome desde los iframes, solo fondo blanco vacío.

Intenté usar el evento load en lugar del controlador ready pero todavía no tuve suerte.
¿Alguien ha visto un problema similar en Chrome?

Su ayuda será muy apreciada.

Las imágenes grandes en el encabezado vienen a través de iframe, una página que incorpora jquery.

Actualización:

Como se muestra en los comentarios a continuación, que no parece funcionar incluso en Safari también.

Actualización 2

El mismo código parece funcionar en cromo cuando se ejecuta fuera del marco flotante, aquí está el enlace a la página de trabajo:

http://jsbin.com/esame4/4

Actualización 3:

Parece que este problema persiste en Chrome al usar iframes como se puede ver aquí:

http://www.google.am/support/forum/p/Chrome/thread?tid=2c81c3e3fd99b388&hl=en
http://forums.sharethis.com/topic.php?id=2742

+1

Este parece ser el caso de Safari también –

+0

@ yaya3: Sí, eso es cierto, Safari también se comporta de esa manera en mi caso. – Sarfraz

+0

No funciona en Safari 5.0 ya sea –

Respuesta

1

Unas pocas sugerencias, en su mayoría relacionados con la configuración de Javascript en la página gallery.php:

Mi primer instinto es decir que es un error (o incluso una respuesta deseada) en la forma en que Chrome/WebKit maneja secuencias de comandos entre sitios y otros agujeros de seguridad potenciales similares. Sé que algunos agujeros de seguridad implican ejecutar script desde dentro de un iframe (como se refiere a this former Chrome bug).

Quizás tenga que ver con hacer referencia a su jquery.min.js desde ajax.googleapis.com en lugar de alojarlo en el mismo dominio que su página gallery.php. Trate de poner una copia de jquery.min.js en su servidor y vincule eso para ver si ayuda.

Además, intente mover la etiqueta de la biblioteca jQuery <link> dentro de la etiqueta <head>, ya que es un lugar más apropiado para ella.

También puede intentar usar el jQuery Innerfade library para ejecutar su pancarta giratoria. Limpiará su secuencia de comandos y, quién sabe, quizás convenza al navegador de que no está tratando de explotar un agujero en la seguridad.

Si no puede cambiar al uso de Innerfade, al menos cambie sus variables de JavaScript para que no se nombren con un $ (por ejemplo, cambie su variable "$ curbox" a "curbox"). Podría aclarar aún más cualquier confusión que el navegador pueda tener con su Javascript.Por lo menos, es una buena práctica, especialmente cuando se usa jQuery.

+0

Intenté todo lo que dijo, pero aún sin resultado :( – Sarfraz

+0

Aún parece que está usando $ en sus nombres de variables. Dudo que haga la diferencia, pero es una buena práctica de todos modos. Http: // www.codelifter.com/main/tips/tip_020.shtml – JoshMock

+0

Sí, incluso intenté reemplazar $ con jQuery, pero eso no es problema también. – Sarfraz

0

Compruebe los encabezados de respuesta en la página que intenta poner en el iframe. Está buscando un encabezado llamado x-frame-options.

Esta es una nueva opción de seguridad que le dice al navegador que no cargue el contenido del marco. Muchos servidores web lo agregarán de forma predeterminada.

Vale la pena comprobarlo.

+0

Intenté configurar esos encabezados con 'header (" x-frame-Options: SAMEORIGIN ");' pero el problema persiste. – Sarfraz

+0

@sAc - ¿entonces había un _x-frame-options_ ya configurado? Si es así, cambiarlo a SAMEORIGIN ayudaría, pero solo si su marco es una página local. De lo contrario, no importa, valió la pena comprobarlo, por las dudas. – Keith

1

Hola sAc, lo he probado en Chrome 5.0.375.86 y funcionó. Como Safari y Chrome usan el mismo motor web (webkit), podría heredar el mismo problema. Dado que es un problema de JavaScript, y ahora Chrome utiliza el motor de JavaScript de Google V8 en lugar de JavaScriptCore (motor de JavaScript predeterminado de webkit), este problema parece estar resuelto en las últimas versiones de Chrome. Quizás puede ser un problema en JavaScriptCore no despachar los eventos ready o load ya que DOM ya está cargado en el documento antes de que se haya construido el iframe. Una solución temporal podría establecerse como una bandera para verificar si el contenido se inicializó. Ponga un temporizador de cinco a diez segundos con setTimeOut para verificar esta bandera. Si no se inicializó, llámalo en la devolución de llamada setTimeOut. Entonces, si Safari no llama a los eventos load o ready, el setTimeOut podría hacerlo por usted. Por supuesto, no lo pongas dentro de tu capa jquery. Ponlo como una etiqueta javascript pura dentro de tu HTML para ser cargado por el iFrame.

2

Si es un problema con el documento. Ya no se llama en el iframe porque la página ya se ha cargado en ese punto, ¿es posible poner en su lugar el javascript que desea cargar en la parte inferior de la página nueva? en document.ready, para que se cargue una vez que todo lo demás se haya cargado? que he hecho algo similar en algunas páginas, al igual que poner un poco de javascript en la parte superior de la página para mostrar una imagen de carga, y otro trozo en la parte inferior de ocultarlo, etc ...

<html> 
    <head><script>function pop(){alert("Page Loaded");}</script></head> 
    <body>Lorum ipsum...</body> 
    <script>pop();</script> 
</html> 
4

La solución es realmente simple. Para que su material iframe se muestre bien en Chrome cuando ve una página/aplicación de Facebook, debe llamar al contenido o a las propiedades desde un servidor seguro.

DEBE asegurarse de que todos sus archivos y carpetas requeridos como el CSS, JS y los archivos de imagen estén dentro de una carpeta segura.

  1. Para esto se necesita un certificado SSL para su dominio.

  2. Modifique su archivo htaccess y modifique la condición de reescritura para forzar SSL para todas las carpetas o carpetas específicas, especialmente cuando utiliza variables para llamar a los archivos. Si está utilizando una URL absoluta, cámbielas a https.

Hope this helps!

0

La razón por la que no funciona es porque el navegador marca el iframe como inseguro. Para solucionar este sólo tiene que añadir un conjunto de caracteres a la cabecera de la página que desea mostrar:

<head><br/> 
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/><br/> 
< /head><br/> 
Cuestiones relacionadas