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?

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?

• javascript
• jquery
• facebook
• iframe
• facebook-iframe

Share Improve this question Follow edited May 23, 2012 at 3:36 super9 asked May 23, 2012 at 3:22 super9super9 30.2k4141 gold badges124124 silver badges172172 bronze badges 3

• Just to check if I got this right: You have a page app which is hosted from domain dX, in that page (pA) you want to load another page (pB, with a form) which is also served from domain dX in an iframe, is that right so far? If so, from where do you want to make api calls? pA, pB, or both? Also, in the app settings the app domain is set to dX? – Nitzan Tomer Commented May 28, 2012 at 18:24
• Negative. pB, with a form is served from domain dZ in an iframe. I want to make an API call via FB Javascript SDK in pA to update the form (user details) in pB. Personally, I don't think its possible as it sounds like a huge security issue if I could. But I just wanted to double check this on SO. – super9 Commented May 29, 2012 at 1:14
• 2 You also should double check that what you trying to do doesn't violates platform policies, at least due to transfer of data to other domain/site, and/or because of form data built upon details retrieved from Facebook's API. – Juicy Scripter Commented May 29, 2012 at 7:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

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 munication, 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>

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.
});

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