2012-03-08 15 views
5

Zajmuję się tworzeniem aplikacji na stronę na Facebooku z układem osi czasu i chcę, aby wysokość aplikacji była skalowana wraz z zawartością, ale wysokość aplikacji jest ustalona na 800px.Wysokość strony aplikacji na oś czasu zatrzymała się na 800px

Bieżące ustawienia aplikacji pokazują, że wysokość jest ustawiona na "płyn", ale próbowałem także ustawić wysokość na przypadkowe wartości i nie zaobserwowałem żadnych zmian.

Jak uzyskać maksymalną wysokość aplikacji do jej zawartości? Dzięki za wszelkie odpowiedzi.

Aktualizacja: Załączenie tego do mojego body tag działało.

<body onload="FB.Canvas.setSize({width: 810, height: 910})"> 
<div id="fb-root"></div> 
<script> 
(function() { 
    var e = document.createElement('script'); 
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOURAPPID; 
    e.async = true; 
    document.getElementById('fb-root').appendChild(e); 
}()); 
</script> 

Ale mam zerowe pojęcia dlaczego to działało, więc chyba będę zmienić moje pytanie "co to powyższy kod zrobić? więc mogę zrozumieć, jakie kroki podjąć następnym razem. Postawię to teraz jako odpowiedź, by zamknąć to pytanie.

Odpowiedz

8

To jest właściwy sposób na ustawienie rzeczy, po prostu musiałem się na to wpatrywać i czytać dokumentację zbyt wiele razy. Umieszczenie poniższego pod elementem div fb-root działało jak mistrz.

window.fbAsyncInit = function() { 
    FB.init({ 
     appId: 'YOURAPPID', // App ID 
     channelUrl: '/channel.html', // Channel File 
     status: true, // check login status 
     cookie: true, // enable cookies to allow the server to access the session 
     xfbml: true // parse XFBML 
    }); 
    FB.Canvas.setAutoGrow(); //Resizes the iframe to fit content 
}; 
// Load the SDK Asynchronously 
(function (d) { 
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) { return; } 
    js = d.createElement('script'); js.id = id; js.async = true; 
    js.src = "//connect.facebook.net/en_US/all.js"; 
    ref.parentNode.insertBefore(js, ref); 
} (document)); 
+1

'setAutoResize' jest deprecates jak wspomniano [tutaj] (https : //developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/). Powinieneś użyć 'setAutoGrow'. –

+0

Dobry połów! Zaktualizuję odpowiedź. Dzięki! – Tuck

+0

Jak to działa z aplikacją iFramed? Dostaję problemy z krzyżowymi skryptami, które uniemożliwiają działanie. Jakieś pomysły? Dzięki! –

0

HTML kod JavaScript, aby zwiększyć wysokość iframe

<script type="text/javascript"> 
    window.fbAsyncInit = function() { 
    FB.Canvas.setAutoResize(100); 
    } 

    function sizeChangeCallback() { 
    FB.Canvas.setSize({ width: 810, height:1300 }); 
    } 
    </script> 
<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script> 
FB.init({ 
appId : 'YOUR APP ID', 
status : true, 
cookie : true, 
xfbml : true 
}); 
</script> 
0

Odpowiedź przez Ashish działa dobrze dla mnie.

ja również styl ciała, aby zapobiec pojawianiu się paski przewijania na sekundę podczas wczytywania strony:

body {overflow: hidden;}

Powiązane problemy