IE7 - setAutoGrow non funziona

Ho creato un'applicazione Facebook che sto utilizzando all'interno di un iFrame di una scheda.IE7 - setAutoGrow non funziona

Sto utilizzando la funzione setAutoGrow di JavaScript SDK per far espandere iFrame fino alla fine del contenuto.

Dalle mie osservazioni, la funzione setAutoGrow non funziona in IE7 e non riesco a capire perché. Tutti gli altri browser (inclusi IE8 e 9) funzionano correttamente.

Per scopi di test, ho creato un gradiente che è alto 1500px.

Example gradient for testing purposed of 1500px height

Per fare un esempio, mi post come appare in Chrome. Come si può vedere, il gradiente è possibile scorrere fino alla fine (colore rosso):

Gradient inside iFrame tab works as expected in normal browsers

E ora arriva quello che succede in IE7. L'iFrame ha un'altezza predefinita di 800 px (come definito nelle impostazioni dell'app). Puoi vedere che si ferma su "turchese" e la funzione setAutoGrow non la estende all'altezza desiderata (1500px).

Gradient inside iFrame tab doesnt expand in IE7

La parte importante del mio CSS appare come segue:

body, html { 
    overflow: hidden;   
    margin: 0; padding: 0; 
} 

    #wrapper { 
     margin: 0 auto; 
     width: 810px;  
    } 

     #content { 
      background: url(../img/bg.jpg) top left no-repeat; 
      height: 1500px; 
     }

E questo è il javascript snippet ho messo poco prima della chiusura corpo-tag e dopo il tag fb-root :

window.fbAsyncInit = function() { 

    FB.init({ 

     appId  : '...', 
     channelUrl : '...', 
     status  : true, 
     cookie  : true, 
     xfbml  : true 

    }); 

    FB.Canvas.setAutoGrow(); 

};

ho trovato un bug report che risale al 1 agosto, che è stato chiuso da FB: https://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413

Ho letto ed applicato i suggerimenti dal seguente argomento: Facebook iframe FB.Canvas.setAutoGrow does not auto grow after initial load?

... ma nulla sembra risolvere il problema.

Qualcuno ha un suggerimento ovvio, qualcosa che ho supervisionato, o una soluzione facile/soluzione per questo problema?

Mentre stavo usando IE7 DebugBar ho notato che stava avendo un problema nel caricare un URL chiamato "dimension_context.php". Allegherò lo screenshot.

IE7 DebugBar loading problem

fonte

2012-08-14 Marcel Kalveram

Tinto in capo. Radicale, amico. –

Il prolly non sarà d'aiuto, ma vale la pena provarlo ... inserisci il contenitore del contenuto: '

' –

Penso che dovresti impostare 'Altezza tela 'su' Fluido', tuttavia penso che il modo migliore sia impostare l'altezza statica - è il meno rischioso :) –

Sto usando questo può essere ti aiuta

<html> 
<body> 
    <div id="fb-root"> 
    </div> 
    <script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript" language="javascript"> 
     FB.init({ 
      appId: 'APPID', 
      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      xfbml: true// parse XFBML 
     }); 
     window.fbAsyncInit = function() { 
      FB.Canvas.setSize(); 
     } 
     // FB.Canvas.setAutoResize(); 
     FB.Canvas.setAutoGrow(7); 
    </script> 
<form></form> 

</body> 
</html>

fonte

2012-08-17 12:24:10

Grazie, l'ho provato ma non è stato d'aiuto –

apps.facebook.com/onlinesocialguru/ Sto usando sopra il codice foy le mie app funziona .. –

Anche in Internet Explorer 7? –

Si può vedere here che la mia scheda sta lavorando su IE7:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script> 
</head> 
<body style="overflow:hidden"> 
<div id="fb-root"></div> 
<!-- YOUR HTML --> 
<script type="text/javascript"> 
window.fbAsyncInit = function() { 
     FB.init({ 
      appId: 0000000000000, // App ID 

      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      oauth: true, // enable OAuth 2.0 
      xfbml: true // parse XFBML 
     }); 

     FB.Canvas.setAutoGrow(); 
     FB.Canvas.setSize({ width: 810, height: 1417 }); 

    }; 



    // Load the SDK Asynchronously 
    (function (d) { 
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     d.getElementsByTagName('head')[0].appendChild(js); 
    } (document)); 
</script> 
</body> 
</html>

mie impostazioni dell'applicazione:

Larghezza scheda pagina: 810px
Canvas Larghezza: fisso Altezza
Tela: fissato a 1147px

Se volete che il vostro scheda di adattarsi a diverse altezze provare questo in ogni pagina:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script> 
</head> 
<body style="overflow:hidden"> 
<div id="fb-root"></div> 
<!-- YOUR HTML --> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId: 0000000000000, // App ID 

      status: true, // check login status 
      cookie: true, // enable cookies to allow the server to access the session 
      oauth: true, // enable OAuth 2.0 
      xfbml: true // parse XFBML 
     }); 

     FB.Canvas.setAutoGrow(); 
     FB.Canvas.setSize({ width: 810, height: $(document).height()}); 

    }; 



    // Load the SDK Asynchronously 
    (function (d) { 
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     d.getElementsByTagName('head')[0].appendChild(js); 
    } (document)); 

}); 
</script> 
</body> 
</html>

Partenza un esempio:

https://www.facebook.com/pages/Vpascoal/215529398504982?sk=app_105369212942645 (fare clic sull'immagine)

fonte

2012-08-17 15:52:54 vpascoal

Ho testato entrambi i siti, ma mostra barre di scorrimento, quando l'altezza del contenuto supera l'altezza di iFrame, vedi qui: [IE7 iframe test 1] (https://www.dropbox.com/s/h01ttvg9v7hpdi3/ie7-iframe1.png) e lì [IE7 iFrame test 2] (https://www.dropbox.com/s/ezzmt47e1o3qrun/ie7-iframe2.png). Forse ha qualcosa a che fare con il fatto che sto eseguendo IE7 virtualmente in Virtual Box? Puoi confermare che questa barra di scorrimento non appare nel tuo caso? –

Ciao! Ho dimenticato di inserire questo nel mio codice: provalo e ora non vedrai barre di scorrimento in IE7 – vpascoal

Hai provato a svuotare la cache di all.js aggiungendo un parametro GET casuale er ad esso? Inoltre, avrei riscritto la parte http: // in // in modo che il file javascript si caricasse correttamente nel caso in cui Facebook fosse in modalità https.

<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>

fonte

2012-08-21 13:04:51

IE7 - setAutoGrow non funziona

risposta

Problemi correlati