Resizable IFrame

From Facebook Developer Wiki

Jump to: navigation, search

The default behavior for an iframe-based canvas page is for it to be "smartsized", in which the iframe fits the remaining space on the page. This option does not allow the application itself to control or change the size of the iframe. For example, the smartsize attribute does not help an application that wants the canvas page to fit the content of iframe when the size of the content itself is not fixed.

To solve this issue and give developers more control on the size of the iframe element on their canvas page, we added a new resizable attribute (that also applies to the fb:iframe tag) that allows application developers to use JavaScript inside an iframe to query and control the size of the iframe element that hosts it.

We added several methods to the JavaScript Client Library, grouped in the FB.CanvasClient class. These methods are explained in our iframe-based application demo.

  • FB.CanvasClient.startTimerToSizeToContent
  • FB.CanvasClient.stopTimerToSizeToContent
  • FB.CanvasClient.setSizeToContent
  • FB.CanvasClient.setCanvasHeight
  • FB.CanvasClient.getCanvasInfo
  • FB.CanvasClient.add_windowSizeChanged
  • FB.CanvasClient.remove_windowSizeChanged
  • FB.CanvasClient.get_timerInterval
  • FB.CanvasClient.set_timerInterval

For example, if you want an iframe-based application's iframe element to fit the size of its content, use the following JavaScript code:

<!-- Note: Include this div markup as a workaround for a known bug in this release on IE where you may get a "operation aborted" error --> <div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div> <script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript"> FB_RequireFeatures(["CanvasUtil"], function(){ FB.XdComm.Server.init(<site relative url to xd_receiver.htm>); FB.CanvasClient.startTimerToSizeToContent(); }); </script>



In order to use this feature, do the following:

  1. For an iframe-based application, set the Default Iframe Canvas Size Option application setting, select Resizable.
    For an FBML-based application that uses the fb:iframe tag to create an iframe, set the resizable attribute to true, and add a name attribute.
  2. Create a static HTML page to enable communication between the canvas host page and the iframe page. See Cross Domain Communication Channel for instructions.
  3. Use JavaScript code in the Web page to call the desired functions.


Browser Support

The following browsers are known to support iframe resizing using the above method for both FeatureLoader.js v0.3 (old profile) and v0.4 (new profile):

  • Internet Explorer 6 (but see the Notes below), 7
  • Firefox 2, 3
  • Safari 3

Notes

  • The script tag for http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php should be placed inside the <body> tag, not inside <head>.
  • It is almost essential that the FB.canvasclient.starttimertosizetocontent() and related code be placed towards the end of other visual HTML markup inside <body> for resizing to work at all.
  • For an IFRAME app, make sure you don't have height set to 100% in either the body or html styles or the resizing won't work.
  • If you are seeing an initial scroll when the page is first loaded it is because the auto resize code is not being completed before the page is rendered. To avoid this issue, you can just explicitly specify CSS style "overflow:hidden" on the body tag in the iFrame.
Retrieved from "http://wiki.developers.facebook.com/index.php/Resizable_IFrame"
reference