Facebook Can I capture user data and fill out a form in an iframe?

Question

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

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

Is it possible to use javascript to request an api chart to load user data into this loaded iframe form using javascript that seems pre-populated by the user?

I know that there is a cross-domain security issue. In this case, suppose my iframe tab is now in the same domain as the loaded iframe form, can this be done now?

Answer 1

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

What can you do:

• Reload the form in the iframe and pass it the data that you get from js sdk, you can even POST the data in the iframe (for example, facebook does canvas applications).

• You should be able to change the location of the iframe, but only the hash part (fragment) that will not cause the iframe to reload.
  In the iframe, you should know the location changes and extract data from the fragment.
  The problem is that this method is likely to ruin the browser history.

• Find another cross-domain solution, maybe easyXDM ?

---

Edit

Here are two options for implementing 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 in 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, in the iframe itself, get the data (either from GET or POST) and create 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; 

You now have an iframe, just use

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

Get data from FB using

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

Answer 3

Your bookmark should make a call to GraphAPI.

Once you get the user data returned to your JavaScript stream, you have 2 options:

1) You can always transfer data to IFRAME with a request. Only at this point you generate an iframe with the correct URL containing the data in the request.

2) You can call the javascript function, which lives on your internal IFRAME page. This function will get the object from the api response on the Facebook chart and will directly fill the page.

Check out this article.

Calling JavaScript code in an iframe from the parent page