2012-05-23 6 views
7

Facebookページのiframeタブを作成しようとしています。Facebookのユーザーデータを取得し、iframeにフォームを取り込むことは可能ですか?

このページでは、別のドメイン/サイトのフォームで構成されるiframeで読み込み中です。

javascriptを使用して、グラフapiを照会して、このiframeがロードされたフォームにユーザーのデータをロードすることはできますか?

クロスドメインセキュリティの問題があります。その場合、iframeがロードされたフォームと同じドメインで現在iframeのタブがホストされているとします。これは現在実行可能ですか?

+0

ちょうど私がこの権利を得たかどうかをチェックしますiframeのドメインdXからも配信されていますが、これまでのところ正しいですか?もしそうなら、どこからapi呼び出しをしたいのですか? pA、pB、またはその両方?また、アプリの設定では、アプリドメインはdXに設定されていますか? –

+0

ネガティブ。 pBはiframeのドメインdZから提供されます。私はpBのフォーム(ユーザーの詳細)を更新するために、pAのFB Javascript SDKを介してAPI呼び出しを行いたいと思います。個人的には、可能なら大したセキュリティ問題のように聞こえるとは思わない。しかし、私はちょうどこれをもう一度チェックしたいと思っていました。 – super9

+2

また、少なくとも、他のドメイン/サイトへのデータ転送やFacebookのAPIから取得した詳細情報に基づいたフォームデータのため、実行しようとしていることがプラットフォームポリシーに違反していないことを再度確認する必要があります。 –

答えて

6

によってFBからデータを取得

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

を使用し、あなたが望むものによるセキュリティへのブラウザによってブロックされます理由(同じ起点ポリシー)。

あなたは何ができる:

  1. はiframe内にフォームをリロードし、それをあなたがFacebookのキャンバスアプリでないようにJS SDK、あなたも(IFRAMEにデータを投稿することができますから取得したデータを渡します)。

  2. iframeの位置は変更できますが、iframeをリロードしないハッシュ部分(フラグメント)のみを変更する必要があります。
    iframeでは、場所の変更を認識し、フラグメントからデータを抽出します。
    問題は、この方法ではブラウザの履歴が間違っている可能性があることです。

  3. クロスドメイン通信の別の解決策を見つけるには、おそらくeasyXDM


編集

ここで最初のオプションの2つの実装は、次のとおりIFRAME

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

<iframe name="userform"></iframe> 
にPOSTを使用して)

<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 GET使用

1)

iframe自体で、(GETまたはPOSTのいずれかの)データを取得し、それに応じてユーザーフォームをレンダリングします。

<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

ポイント1の詳細を教えてください。あなたがちょうど言ったことから私が理解していることから、dXのpAはdZのpBの入力フィールドの値を変更することができますか?これを行うには正しい方向で私を指すことができると思いますか? – super9

+0

また、あなたが言ったようにブラウザにブロックされませんか? – super9

+0

いいえ、ブラウザはこの試行をブロックすべきではありません。たとえば、これはFacebookのキャンバスアプリの読み込み方法です。 –

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

今、あなたはインラインフレームを持って、単にあなたが正しいです

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

ああ私はあなたの質問を間違って読んだと思う! –

1

あなたのタブページはGraphAPIを呼び出す必要があります。

1)あなたは、常にクエリ文字列を使用して、あなたのIFRAMEにデータを渡すことができます:あなたは、ユーザーのデータは、JavaScriptのスレッドに戻った得れば

は、あなたは2つのオプションがあります。この瞬間にのみ、クエリ文字列のデータを含む正しいurlでiframeを生成します。

2)内部IFRAMEページにあるjavascript関数を呼び出すことができます。この関数は、Facebookのグラフapiの応答からオブジェクトを受け取り、ページに直接データを入力します。

この記事をチェックしてください。であるあなたは、ドメインのdXからホストされているページのアプリを持って、そのページ(PA)であなたは(フォームとをpB、)別のページをロードする:

Invoking JavaScript code in an iframe from the parent page

関連する問題