2012-05-23 13 views
7

Sto provando a creare una scheda iframe per una pagina di Facebook.Facebook È possibile acquisire i dati di un utente e compilare un modulo in un iframe?

In questa pagina, sto caricando in un iframe costituito da un modulo di un altro dominio/sito.

È possibile utilizzare javascript per interrogare il grafico api per caricare i dati dell'utente in questo modulo caricato iframe utilizzando javascript tale che viene visualizzato prepopolato all'utente?

Sono consapevole che esiste un problema di sicurezza tra domini. In tal caso, supponiamo che la mia scheda iframe sia ora ospitata nello stesso dominio del modulo caricato con iframe, sarà fattibile ora?

+0

solo per controllare se ho ottenuto questo diritto: Hai un app pagina che è ospitato dal dominio DX, in quella pagina (Pa) che si desidera caricare un'altra pagina (PB, con una forma), che è anche servito da dominio dX in un iframe, è così giusto? Se sì, da dove vuoi effettuare chiamate API? pA, pB o entrambi? Inoltre, nelle impostazioni dell'app il dominio dell'app è impostato su dX? –

+0

Negativo. pB, con un modulo viene fornito dal dominio dZ in un iframe. Voglio fare una chiamata API tramite FB Javascript SDK in pA per aggiornare il modulo (dettagli utente) in pB. Personalmente, non credo sia possibile in quanto potrebbe sembrare un enorme problema di sicurezza se potessi. Ma volevo solo ricontrollare questo su SO. – super9

+2

Dovresti anche ricontrollare che ciò che stai tentando di fare non viola le politiche della piattaforma, almeno a causa del trasferimento di dati ad altri domini/siti e/oa causa di dati di moduli creati su dettagli recuperati dall'API di Facebook. –

risposta

6

Hai ragione, ciò che si vuole verra 'bloccato dal browser a causa di sicurezza ragioni (stessa politica di origine).

Cosa si può fare:

  1. Ricarica il modulo nella iframe e passarlo i dati che si ottiene dal js SDK, è possibile anche post i dati nel IFRAME (come facebook fa con le applicazioni di tela).

  2. Dovresti essere in grado di modificare la posizione dell'iframe, ma solo la parte di hash (frammento), che non farà ricaricare l'iframe.
    Nell'iframe tenere conto delle modifiche alla posizione ed estrarre i dati dal frammento.
    Il problema è che questo metodo probabilmente rovinerà la cronologia del browser.

  3. Trova un'altra soluzione per la comunicazione tra domini, forse easyXDM?


Modifica

Qui ci sono due implementazioni della prima opzione:

1) Utilizzando 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) usando la posta 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> 

Quindi, sull'iframe stesso, ottenere i dati (da GET o POST) e rendere il modulo utente di conseguenza.

<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> 
+0

Potresti approfondire il punto 1 per favore? Da quanto ho capito da quello che hai appena detto, pA da dX è in grado di modificare il valore dei campi di input in pB da dZ? Pensi di potermi indirizzare nella direzione giusta per fare questo? – super9

+0

Inoltre, non sarò bloccato dal browser come quello che hai detto? – super9

+0

No, il browser non dovrebbe bloccare questo tentativo. Ad esempio, questo è il modo in cui Facebook carica le app su tela. –

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

Ora avete l'iframe, è sufficiente utilizzare

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

recuperare i dati da FB da

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

oh merda .. penso di aver letto la tua domanda sbagliata! –

1

La scheda deve effettuare la chiamata a GraphAPI.

Una volta che i dati dell'utente restituiti al tuo thread JavaScript, allora si hanno 2 opzioni:

1) È sempre possibile passare i dati al vostro IFRAME tramite querystring.Solo in questo momento si genera l'iframe con l'url giusto contenente i dati nella query querystring.

2) È possibile richiamare una funzione javascript che risiede nella pagina IFRAME interna. Questa funzione riceverà l'oggetto dalla risposta api del grafico di Facebook e popolerà la pagina direttamente.

Controllare questo articolo.

Invoking JavaScript code in an iframe from the parent page

Problemi correlati