IFrame Resize Demo

This demo illustrate how to use control the size of iframe canvas through Facebook JavaScript Client

Size to content

The most common scenerio is to keep the iframe element sized to the content of the iframe. To do this, simply call FB.CanvasClient.startTimerToSizeToContent(). This demo call FB.CanvasClient.startTimerToSizeToContent() by default. You can click on the "Toggle box size" button to change the size of this iframe and watch how the iframe element size adjust to it.

FB.CanvasClient.startTimerToSizeToContent() uses a timer to track the size of content in the iframe. To get/set the timer internal, use FB.CanvasClient.get_timerInterval()/FB.CanvasClient.set_timerInterval(int internal). To stop the timer completely, use FB.CanvasClient.stopTimerToSizeToContent().

x= y=

Toggle Box Size
Box

Track window resize event

You can use FB.CanvasClient.add_windowSizeChanged() function to subscribe to the resize event in the hosting browser window. Click on the button below and adjust the size of your browser window and see how it track the changes

Change the Canvas height directly

If you want to change the canvas height directly, you can use FB.CanvasClient.setCanvasHeight(string heightString) directly. The parameter should be valid value for CSS height property.

File listing

This demo application consists of 2 files