Iframe tabok és a scrollbar probléma

Sok esetben futunk bele olyan rajongói oldalakba facebookon, ahol a tabok tartalma mellett/alatt megjelennek a görgetősávok, jelezve, hogy nincs elegendő hely a megjelenítésre.  Ez gyakran olyankor is jelentkezik, amikor ez az állítás nem igaz és rendesen kellene látnunk a kimenetet. Mi okozhatja ezt a problémát és mit lehet tenni ellene?

Amikor létrehozunk egy alkalmazást a fejlesztői felületen, az „On Facebook” menüpont „Canvas Settings” almenüjében megadhatjuk, hogy milyen legyen az iframe „mérete”. Választhatjuk a görgetősávok megjelenítését, vagy azt, hogy automatikusan növekedjen a megjelenítésre használt terület. A súgó szövegben láthatjuk, hogy az Auto-resize opció választása esetén,  a FB.Canvas.setAutoResize javascript függvény meghívásával tudjuk befolyásolni a tab magasságát. Sok esetben nincs is szükség másra, elég csak ezt a kódot használnunk, a következőképpen:

helyezzük el az oldalunk forrásának head részében a következő sorokat:

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

function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

a </body> elé pedig ezt:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/hu_HU/all.js"></script>
<script>

FB.init({
        appId  : 'YOUR APP ID',
        status : true,
        cookie : true,
        xfbml  : true
});

sizeChangeCallback();
</script>

(az app id-t ne felejtsük el lecserélni az adott alkalmazás ID-ra)

A másik lehetőség a scrollbarok elkerülésére, ha fix méretekkel dolgozunk, és csak az alapból rendelkezésre álló területre méretezzük a tabunk tartalmát (520x800px).

CSS-ben a body és html elemekről is vegyük le a padding és margin értékeket:

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

Használjunk táblázatot a megjelenítéshez. Ne kövezzetek meg 🙂 Tudom, hogy ez egy elavult módszer, mégis több helyen olvastam, hogy akinél már semmi nem segített, végül ez jelentette a megoldást.

Ha valamilyen javascript kód is fut a tabunk forrásában, kimondottan figyeljünk rá, hogy ne legyen benne semmilyen szintaktikai hiba.

A leggyakrabban használt és leginkább működőképesnek tűnő megoldást az jelenti, ha egy kis késleltetéssel futtatjuk le a canvas méretét beállító függvényt:

<div id="fb-root"></div>
<script language="javascript" type="text/javascript">
window.fbAsyncInit = function() {
        FB.init({
                appId  : 'YOUR APP ID',
                status : true,
                cookie : true,
                xfbml  : true
        });
};

(function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
        setTimeout("FB.Canvas.setAutoResize()",250);
}());
</script> 

Sajnos ez a probléma kb 1 éve van jelen a facebookon és azóta sem sikerült egy tökéletesen működő áthidaló megoldást találni rá. Így előfordulhatnak olyan helyzetek, amikor ezek a lehetőségek sem segítenek.