Facebook Is it possible to grab a user's data and populate a form in an iframe?

Question

I am trying to create an iframe tab for a Facebook Page.

On this page, I am loading in an iframe which consists of a form from another domain/site.

Is it possible to use javascript to query the graph api to load the user's data into this iframe loaded form using javascript such that is appears pre-populated to the user?

I am aware that there is a cross domain security issue. In that case, suppose that my iframe tab is now hosted on the same domain as the iframe loaded form, will this be doable now?

Answer 1

You are right, what you want will be blocked by the browser due to security reasons (same origin policy).

What you can do:

1. Reload the form in the iframe and pass it the data you get from the js sdk, you can even POST the data into the iframe (like facebook does with canvas apps).

2. You should be able to change the location of the iframe, but just the hash part (fragment), which will not cause the iframe to reload.
   In the iframe be aware of location changes and extract the data from the fragment.
   The problem is that this method will probably mess up with the browser history.

3. Find another solution for cross domain communication, maybe easyXDM?

---

Edit

Here are two implementations of the first option:

1) Using GET

<iframe id="userform"></iframe>

<script type="text/javascript">
    // load and init FB JS SDK

    FB.api("me", function(response) {
        document.getElementById("userform").src = USER_FORM_URL + "?name=" + response.name;
    });
</script>

2) Using POST into the iframe

<form method="POST" action="USER_FORM_URL" target="userform" id="postForm">
    <input type="hidden" name="fbResponse" id="fbResponseInput" />
</form>

<iframe name="userform"></iframe>

Then, on the iframe itself, get the data (either from GET or POST) and render the user form accordingly.

<script type="text/javascript">
    // load and init FB JS SDK

    FB.api("me", function(response) {
        document.getElementById("fbResponseInput").value = JSON.stringify(response);
        document.getElementById("postForm").submit();
    });
</script>

Answer 2

var ifrm = document.getElementById('myIframe');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;

Now you have the iframe, simply use

ifrm.getElementById('textBoxId').value = 'value-fetched-from-facebook';

Fetch data from FB by

FB.api('me?fields=firstName&lastName', function(res)
{
//response contains your user info.
});

Answer 3

Your tab page has to make the call to the GraphAPI.

Once you get the user's data returned to your JavaScript thread, then you have 2 options:

1) You can always pass data to your IFRAME using querystring. Only in this moment you generate the iframe with the right url containing the data in the querystring.

2) You can invoke a javascript function that lives in your internal IFRAME page. This function will receive the object from the Facebook graph api response and will populate the page directly.

Check this article.

Invoking JavaScript code in an iframe from the parent page