IFrame URL

From Facebook Developer Wiki

Jump to: navigation, search

This feature is currently in early Beta and is subject to change.

This article explains how you can configure your IFrame and Flash applications to control browser history within Facebook.


[edit] Static IFrame Applications

Let's say you have an IFrame canvas page that links to another page. One efficient method for doing this is to keep the target within the IFrame. This has two disadvantages:

  1. Browsers inconsistently store the last IFrame page in history.
  2. Users cannot navigate back to the page since the outer URL does not change.

The IFrame Util library offers solutions to these problems. All you need to do is add the following line of code to your initialization on each page.

FB.CanvasClient.syncUrl();


On a standard IFrame page, after the initial page load, that call will render code like this:

FB_RequireFeatures(["CanvasUtil"], function() { FB.Facebook.init(<api_key>, <path to xd_receiver>); FB.CanvasClient.startTimerToSizeToContent(); FB.CanvasClient.syncUrl(); });


From this point forward, syncUrl will report any inner URL to the outer frame and append it to the URL hash. For example, if your original page is:

http://apps.facebook.com/foo/sample1.php,

Clicking a link to sample2.php inside the IFrame will take the outer frame to:

http://apps.facebook.com/foo/sample1.php#/foo/sample2.php

If the user navigates back to this page, the browser resolves to:

http://apps.facebook.com/foo/sample2.php

[edit] Dynamic IFrame Applications

IFrame applications that make heavy use of JavaScript or Flash can also take advantage of this history control. You still call syncUrl on the initial page load, but then additionally call changeUrlSuffix on every pseudo page load. Calling this method:

FB.CanvasClient.changeUrlSuffix("settings");


Will change the URL to:

http://apps.facebook.com/foo/#/foo/settings

Developers can also override the browser's Back and Forward buttons in JavaScript.

FB.CanvasClient.setUrlHandler(function(internal_url) { // do something with url });


This function intercepts URL changes and sends the new internal URL to the application.

Retrieved from "http://wiki.developers.facebook.com/index.php/IFrame_URL"
reference