2012-05-23 3 views
7

Ich versuche, einen Iframe-Tab für eine Facebook-Seite zu erstellen.Facebook Ist es möglich, die Daten eines Benutzers zu erfassen und ein Formular in einem Iframe zu füllen?

Auf dieser Seite lade ich einen iframe, der aus einem Formular von einer anderen Domain/Site besteht.

Ist es möglich, JavaScript zu verwenden, um das Diagramm api abzufragen, um die Daten des Benutzers in dieses iframe geladene Formular unter Verwendung von Javascript zu laden, das erscheint, der dem Benutzer vorgefüllt erscheint?

Ich bin mir bewusst, dass es ein Cross-Domain-Sicherheitsproblem gibt. In diesem Fall wird angenommen, dass meine iframe-Registerkarte jetzt in derselben Domäne gehostet wird wie die iframe-geladene Form. Ist dies jetzt machbar?

+0

Nur um zu überprüfen, ob ich dieses Recht habe: Sie haben eine Seite App, die von Domäne dX gehostet wird, in dieser Seite (pA) Sie eine weitere Seite (pB, mit einem Formular) laden möchten die ist auch von domain dX in einem iframe bedient, ist das richtig so weit? Wenn ja, von wo möchten Sie api Anrufe tätigen? pA, pB oder beides? Auch in den App-Einstellungen ist die App-Domain auf dX eingestellt? –

+0

Negativ. pB, mit einem Formular wird von Domain dZ in einem iframe serviert. Ich möchte einen API Aufruf über FB Javascript SDK in pA machen, um das Formular (Benutzerdetails) in pB zu aktualisieren. Persönlich denke ich nicht, dass es möglich ist, da es wie ein riesiges Sicherheitsproblem klingt, wenn ich könnte. Aber ich wollte das nur auf SO überprüfen. – super9

+2

Sie sollten auch überprüfen, ob das, was Sie versuchen, nicht gegen Plattformrichtlinien verstößt, zumindest aufgrund der Übertragung von Daten an andere Domänen/Websites und/oder aufgrund von Formulardaten, die auf Details aus der API von Facebook basieren. –

Antwort

6

Sie haben Recht, was wollen Sie vom Browser aus Sicherheitsgründen blockiert werden Gründe (gleiche Ursprungspolitik).

Was können Sie tun:

  1. das Formular in der iframe neu laden und die Daten, die Sie aus der js sdk bekommen passieren, können Sie auch die Daten in die iframe Post (wie Facebook mit Leinwand Apps tut).

  2. Sie sollten in der Lage sein, die Position des Iframe zu ändern, aber nur den Hash-Teil (Fragment), der nicht zum erneuten Laden des Iframes führt.
    Im iframe beachten Sie Standortänderungen und extrahieren Sie die Daten aus dem Fragment.
    Das Problem ist, dass diese Methode wahrscheinlich mit dem Browserverlauf versauen wird.

  3. Suchen Sie eine andere Lösung für die domänenübergreifende Kommunikation, vielleicht easyXDM?


bearbeiten

Hier sind zwei Implementierungen der ersten Option:

1) 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) mithilfe von POST in den iframe

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

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

Dann auf dem iframe selbst, holen Sie sich die Daten (entweder von GET oder von POST) und rendern das Benutzerformular entsprechend.

<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

Können Sie bitte mehr zu Punkt 1 ausführen? Was kann ich von dem, was Sie gerade gesagt haben, sagen, pA von dX ist in der Lage, den Wert der Eingabefelder in pB von dZ zu ändern? Denkst du, du kannst mir in die richtige Richtung zeigen, dies zu tun? – super9

+0

Auch, werde ich nicht vom Browser blockiert, wie du es gesagt hast? – super9

+0

Nein, der Browser sollte diesen Versuch nicht blockieren. So lädt Facebook beispielsweise Canvas-Apps. –

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

Jetzt haben Sie die iframe, verwenden Sie einfach

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

Fetch Daten von FB durch

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

oh Mist ... ich glaube ich habe deine Frage falsch gelesen! –

1

Ihre Registerkarte muss den Aufruf der GraphAPI aufrufen.

Sobald Sie die Daten des Benutzers zurück zu Ihrem JavaScript-Thread zu bekommen, dann haben Sie 2 Möglichkeiten:

1) Sie können jederzeit Daten an Ihren IFRAME passieren Abfragezeichenfolgeflag verwenden.Nur in diesem Moment generieren Sie den Iframe mit der richtigen URL, die die Daten in der Querystring enthält.

2) Sie können eine JavaScript-Funktion aufrufen, die auf Ihrer internen IFRAME-Seite existiert. Diese Funktion empfängt das Objekt von der Facebook-Grafik-API-Antwort und füllt die Seite direkt auf.

Überprüfen Sie diesen Artikel.

Invoking JavaScript code in an iframe from the parent page

Verwandte Themen