2012-05-23 7 views
7

Próbuję utworzyć zakładkę iframe dla strony na Facebooku.Facebook Czy można pobrać dane użytkownika i wypełnić formularz w elemencie iframe?

Na tej stronie ładuję element iframe, który składa się z formularza z innej domeny/witryny.

Czy można używać javascript do wysyłania zapytań do interfejsu graficznego, aby załadować dane użytkownika do tego załadowanego formularza iframe za pomocą javascript, który jest wstępnie wypełniony dla użytkownika?

Mam świadomość, że istnieje problem z zabezpieczeniami międzydomenowymi. W takim przypadku, załóżmy, że moja zakładka iframe jest teraz hostowana w tej samej domenie co załadowany formularz iframe, czy będzie to teraz wykonalne?

+0

Wystarczy, aby sprawdzić, czy mam to prawo: Masz aplikację strony, która jest umieszczona na serwerze w domenie Dx, w tym strony (PA), który chcesz załadować inną stronę (Pb, z formularza), który jest również z domeny dX w iframe, czy to prawda do tej pory? Jeśli tak, skąd chcesz wykonywać połączenia API? pA, pB lub oba? Ponadto w ustawieniach aplikacji domena aplikacji jest ustawiona na dX? –

+0

Negatywny. pB, z formularzem jest dostarczany z domeny dZ w iframe. Chcę nawiązać połączenie poprzez FB API JavaScript SDK w Pa, aby zaktualizować formularz (dane użytkownika) w PB. Osobiście nie sądzę, że jest to możliwe, ponieważ brzmi jak ogromny problem z bezpieczeństwem, gdybym mógł. Ale chciałem to jeszcze raz sprawdzić na SO. – super9

+2

Powinieneś również dokładnie sprawdzić, czy to, co próbujesz zrobić, nie narusza zasad platformy, przynajmniej ze względu na transfer danych do innej domeny/witryny i/lub z powodu danych formularzy zbudowanych na podstawie danych pobranych z interfejsu API Facebooka. –

Odpowiedz

6

masz rację, co chcesz zostanie zablokowany przez przeglądarkę ze względu na bezpieczeństwo powody (polityka tego samego pochodzenia).

Co można zrobić:

  1. Odśwież formularza w iframe i przekazać mu dane można uzyskać z JS SDK, można nawet opublikować dane do iframe (jak facebook robi z aplikacjami płótnie).

  2. Powinieneś być w stanie zmienić lokalizację elementu iframe, ale tylko część hash (fragment), która nie spowoduje ładowania elementu iframe.
    W iframe należy pamiętać o zmianach lokalizacji i wyodrębnić dane z fragmentu.
    Problem polega na tym, że ta metoda prawdopodobnie zepsuje historię przeglądarki.

  3. Znajdź inne rozwiązanie dla komunikacji między domenami, być może easyXDM?


Edit

Oto dwie implementacje pierwszej opcji:

1) Za pomocą 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) Użycie POST do iframe

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

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

Następnie, w samym elemencie iframe, pobierz dane (z GET lub POST) i wyrenderuj formularz użytkownika.

<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

mógłbyś opracować bardziej na punkcie 1 proszę? Z tego, co rozumiem z tego, co właśnie powiedziałeś, pA z dX jest w stanie dokonać zmiany wartości pól wejściowych w pB z dZ? Czy myślisz, że możesz wskazać mi właściwy kierunek, aby to zrobić? – super9

+0

Również nie będę zablokowane przez przeglądarkę jak to, co pan powiedział? – super9

+0

Nie, przeglądarka nie powinna blokować tej próby. Na przykład w ten sposób Facebook ładuje aplikacje na płótno. –

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

Teraz masz iframe, wystarczy użyć

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

pobrać dane z FB przez

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

O cholera .. myślę, czytam Twoje pytanie źle! –

1

Strona zakładki musi wywołać GraphAPI.

Po uzyskaniu danych użytkownik powrócił do wątku JavaScript, następnie masz 2 opcje:

1) Zawsze można przekazać dane do IFRAME przy użyciu ciągu kwerendy.Tylko w tym momencie możesz wygenerować element iframe za pomocą prawego adresu URL zawierającego dane w zapytaniu.

2) można wywołać funkcji javascript, który żyje na stronie IFRAME wewnętrznego. Ta funkcja odbierze obiekt z odpowiedzi interfejsu API wykresu Facebook i bezpośrednio zapełni stronę.

zobacz ten artykuł.

Invoking JavaScript code in an iframe from the parent page

Powiązane problemy