2012-05-23 35 views
7

Tôi đang cố gắng tạo tab iframe cho Trang Facebook.Facebook Có thể lấy dữ liệu của người dùng và điền vào một biểu mẫu trong khung nội tuyến không?

Trên trang này, tôi đang tải trong khung nội tuyến bao gồm biểu mẫu từ một tên miền/trang web khác.

Có thể sử dụng javascript để truy vấn biểu đồ api để tải dữ liệu của người dùng vào biểu mẫu iframe được tải bằng javascript như vậy xuất hiện được điền trước cho người dùng không?

Tôi biết rằng có vấn đề về bảo mật tên miền chéo. Trong trường hợp đó, giả sử rằng tab iframe của tôi hiện được lưu trữ trên cùng một miền với biểu mẫu đã tải iframe, điều này có thể thực hiện được ngay bây giờ không?

+0

Chỉ cần để kiểm tra xem tôi có quyền này: Bạn có một ứng dụng trang đó được lưu trữ từ miền dX, trong trang đó (PA), bạn muốn tải một trang khác (Pb, với một hình thức) đó là cũng được phân phát từ miền dX trong iframe, cho đến thời điểm này? Nếu vậy, từ nơi nào bạn muốn thực hiện cuộc gọi api? pA, pB hoặc cả hai? Ngoài ra, trong cài đặt ứng dụng, miền ứng dụng được đặt thành dX? –

+0

Phủ định. pB, với một biểu mẫu được phân phát từ miền dZ trong khung nội tuyến. Tôi muốn thực hiện cuộc gọi API thông qua FB Javascript SDK trong pA để cập nhật biểu mẫu (chi tiết người dùng) trong pB. Cá nhân, tôi không nghĩ rằng nó có thể như nó âm thanh như một vấn đề an ninh rất lớn nếu tôi có thể. Nhưng tôi chỉ muốn kiểm tra lại điều này trên SO. – super9

+2

Bạn cũng nên kiểm tra lại xem những gì bạn đang cố gắng làm không vi phạm chính sách nền tảng, ít nhất là do chuyển dữ liệu sang tên miền/trang web khác và/hoặc do dữ liệu biểu mẫu được tạo dựa trên các chi tiết được truy xuất từ ​​API của Facebook. –

Trả lời

6

Bạn đang đúng, những gì bạn muốn sẽ bị chặn bởi trình duyệt do an ninh lý do (cùng một chính sách gốc).

Những gì bạn có thể làm:

  1. Nạp lại dưới hình thức trong iframe và vượt qua nó các dữ liệu bạn nhận được từ các js sdk, bạn thậm chí có thể POST dữ liệu vào iframe (như facebook không với các ứng dụng canvas).

  2. Bạn sẽ có thể thay đổi vị trí của khung nội tuyến, nhưng chỉ phần băm (đoạn) sẽ không khiến khung nội tuyến tải lại.
    Trong khung nội tuyến, hãy lưu ý các thay đổi về vị trí và trích xuất dữ liệu từ đoạn.
    Vấn đề là phương pháp này có thể sẽ gây rối với lịch sử trình duyệt.

  3. Tìm giải pháp khác cho giao tiếp tên miền chéo, có thể easyXDM?


Sửa

Dưới đây là hai triển khai các tùy chọn đầu tiên:

1) Sử dụng 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) Sử dụng POST vào iframe

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

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

Sau đó, trên khung nội tuyến, hãy lấy dữ liệu (từ GET hoặc POST) và hiển thị biểu mẫu người dùng tương ứng.

<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

Bạn có thể xây dựng thêm chi tiết ở điểm 1 không? Từ những gì tôi hiểu từ những gì bạn vừa nói, pA từ dX có thể thay đổi giá trị của các trường đầu vào trong pB từ dZ? Bạn có nghĩ rằng bạn có thể chỉ cho tôi đúng hướng để làm điều này? – super9

+0

Ngoài ra, tôi có bị chặn bởi trình duyệt như những gì bạn nói không? – super9

+0

Không, trình duyệt không nên chặn nỗ lực này. Ví dụ, đây là cách facebook tải ứng dụng canvas. –

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

Bây giờ bạn có iframe, chỉ cần sử dụng

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

Fetch dữ liệu từ FB bởi

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

oh crap .. tôi nghĩ rằng tôi đọc câu hỏi của bạn sai! –

1

Trang tab của bạn phải thực hiện cuộc gọi đến GraphAPI.

Khi bạn nhận được dữ liệu của người dùng quay trở lại chủ đề JavaScript của bạn, sau đó bạn có 2 lựa chọn:

1) Bạn luôn có thể truyền dữ liệu đến IFRAME của bạn sử dụng chuỗi truy vấn.Chỉ trong thời điểm này, bạn tạo khung nội tuyến với url đúng chứa dữ liệu trong chuỗi truy vấn.

2) Bạn có thể gọi hàm javascript nằm trong trang IFRAME nội bộ của bạn. Hàm này sẽ nhận đối tượng từ phản hồi api biểu đồ Facebook và sẽ điền trực tiếp vào trang đó.

Kiểm tra bài viết này.

Invoking JavaScript code in an iframe from the parent page

Các vấn đề liên quan