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>