2010-06-23 22 views
15

ho creato una pagina fan facebook qui:jQuery/iframe non funziona in Chrome

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

Incorpora iframe chiamare alcune pagine/gallerie di immagini che utilizzano jQuery. Tutto funziona bene in tutti i browser ad eccezione di Chrome. Nulla compare in Chrome dagli iframe, solo uno sfondo bianco vuoto.

Ho provato a utilizzare l'evento load anziché a ready ma ancora senza fortuna.
Qualcuno ha assistito al problema simile in chrome?

Il vostro aiuto sarà molto apprezzato.

Le grandi immagini nell'intestazione passano attraverso iframe, una pagina che include jquery.

Aggiornamento:

Come mostrato nei commenti qui sotto, ma non sembra funzionare anche in Safari pure.

Update 2

Lo stesso codice sembra funzionare in cromo quando viene eseguito al di fuori della iframe, ecco il link alla pagina di lavoro:

http://jsbin.com/esame4/4

Update 3:

Sembra che questo problema persista in chrome quando si utilizzano iframe come si può vedere qui:

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

+1

questo sembra essere il caso per safari troppo –

+0

@ yaya3: Sì, questo è vero, Safari si comporta anche in quel modo nel mio caso. – Sarfraz

+0

Non funziona in Safari 5.0 o –

risposta

1

Alcuni suggerimenti, per lo più legati al vostro setup Javascript nella pagina gallery.php:

Il mio primo istinto è quello di dire che è un bug (o anche una risposta previsto) in il modo in cui Chrome/WebKit gestisce lo scripting cross-site e altri potenziali buchi di sicurezza simili. So che alcune falle nella sicurezza implicano l'esecuzione di script all'interno di un iframe (come ad esempio this former Chrome bug).

Forse è qualcosa a che fare con il riferimento a jquery.min.js da ajax.googleapis.com invece di ospitarlo nello stesso dominio della pagina gallery.php. Prova a mettere una copia di jquery.min.js sul tuo server e collegarlo a questo e vedere se aiuta.

Inoltre, prova a spostare il tag della libreria jQuery <link> all'interno del tag <head>, poiché si tratta di una posizione più appropriata.

Si potrebbe anche provare a utilizzare il jQuery Innerfade library per eseguire il banner rotante. Pulirebbe il tuo script e, chissà, forse convincerebbe il browser che non stai cercando di sfruttare un buco nella sicurezza.

Se non riesci a utilizzare Innerfade, modifica almeno le tue variabili JavaScript per non essere nominato con $ (ad esempio, modifica la variabile "$ curbox" in "curbox"). Potrebbe inoltre chiarire qualsiasi confusione che il browser potrebbe avere con il tuo Javascript.Per lo meno, è una buona pratica, specialmente quando si usa jQuery.

+0

Ho provato tutto ciò che hai detto, ma senza risultato :( – Sarfraz

+0

Sei sicuro? Sembra che tu stia usando $ nei nomi delle variabili. Dubito che farà la differenza, ma è comunque una buona pratica. www.codelifter.com/main/tips/tip_020.shtml – JoshMock

+0

Sì, avevo provato anche a sostituire $ con jQuery ma questo non è un problema anche – Sarfraz

0

Controllare le intestazioni di risposta nella pagina che si sta tentando di inserire in iframe. Stai cercando un'intestazione chiamata x-frame-options.

Questa è una nuova opzione di sicurezza che indica al browser di non caricare il contenuto della cornice. Molti server web lo aggiungeranno per impostazione predefinita.

È qualcosa che vale la pena controllare.

+0

Provato a impostare quelle intestazioni con 'header (" x-frame-Options: SAMEORIGIN ");' ma il problema persiste. – Sarfraz

+0

@ sAc - quindi era già impostato _x-frame-options_? Se così cambiando in SAMEORIGIN sarebbe di aiuto, ma solo se il frame è una pagina locale. Altrimenti non importa - valeva la pena controllare, per ogni evenienza. – Keith

1

Hey sAc, ho provato su Chrome 5.0.375.86 e ha funzionato. Poiché safari e chrome utilizzano lo stesso motore Web (webkit), potrebbe ereditare lo stesso problema. Poiché si tratta di un problema di javascript, e ora chrome utilizza il motore JavaScript v8 di google invece JavaScriptCore (motore javascript predefinito da webkit), questo problema sembra essere risolto nelle ultime versioni di Chrome. Forse può essere un problema su JavaScriptCore non distribuire gli eventi pronti o carichi poiché DOM è già caricato sul documento prima che l'iframe sia stato costruito. Una soluzione temporanea potrebbe essere impostata su un flag per verificare se il contenuto è stato inizializzato. Metti un timer da cinque a dieci secondi con setTimeOut per controllare questo flag. Se non è inizializzato, chiamalo sul callback setTimeOut. Quindi se safari non chiama il carico o gli eventi pronti, il setTimeOut potrebbe farlo per te. Ovviamente, non metterlo nel tuo livello jquery. Mettilo come un tag javascript puro all'interno del tuo HTML per essere caricato da iFrame.

2

Se si tratta di un problema con document.ready non viene chiamato nell'iframe perché la pagina è già stata caricata in quel punto, è possibile invece inserire il javascript che si desidera caricare nella parte inferiore della nuova pagina invece di in document.ready, in modo che si carichi una volta che tutto il resto è stato caricato? Ho fatto qualcosa di simile in alcune pagine, come mettere un po 'di javascript in alto della pagina per mostrare un carico di immagine e un altro pezzo sul fondo di nasconderlo, ecc ...

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

La soluzione è in realtà semplice. Per far sì che le tue cose iframe vengano visualizzate correttamente in Chrome quando vedi una pagina/app di Facebook, devi chiamare il contenuto o le proprietà da un server protetto.

È NECESSARIO assicurarsi che tutti i file e le cartelle richiesti come CSS, JS e file immagine siano contenuti in una cartella protetta.

  1. Per questo è necessario un certificato SSL per il proprio dominio.

  2. Modificare il file htaccess e la condizione di riscrittura mod per forzare SSL per tutte le cartelle o specifiche, in particolare quando si utilizzano le variabili per chiamare i file. Se utilizzi l'URL assoluto, modificali in https.

Spero che questo aiuti!

0

Il motivo per cui non funziona è perché il browser contrassegna l'iframe come non sicuro. Per correggere questo basta aggiungere un set di caratteri al capo della pagina che si desidera visualizzare:

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