1

I have a facebook canvas application that as a top setup bar. I added a like button that opens an IFrame that contains the users who liked the application with an option to like/unlike the application. i added a button to that iframe that's suppose to close that iframe when clicked.

so inside the iframe html i have:

function closeIFrame() {
    window.parent.closeLikeIframe();
}

the button that I created execute this function.

inside the parent page I have the following code:

function closeLikeIframe() {
    var iframe = document.getElementById('likeIframe');
    iframe.style.display = "none";
}

so in Firefox it works great, but it doesn't in other browsers. I can a javascript error

unsafe JavaScript attempt to access frame with URL http://X from frame with URL http://Y. Domains, protocols and ports must match.
user_like.html:15Uncaught TypeError: Property 'closeLikeIframe' of object [object DOMWindow] is not a function

it doesn't find the function closeLikeIframe because the main page sits on facebook while the IFrame itself sits on my servers so i doesn't allow the access.

any ideas on how to properly open and close that IFrame ?

thanks

ufk
  • 30,912
  • 70
  • 235
  • 386
  • 1
    I have no expierence with facebook, but generally JavaScript can't access anything from another domain and there is not much one can do about that other than re-conceptionalizing the project. – RoToRa Dec 20 '11 at 14:31

1 Answers1

1

There's a general workaround which is a bit hacky, and involves putting another iframe inside the first one:

+------------------------------------------------+
| A: Main page on FB                             |
|                                                |
|    +---------------------------------------+   |
|    | B: Iframe (page on your server)       |   |
|    |                                       |   |
|    |    +--------------------------------+ |   |
|    |    | C: Another iframe, page on FB  | |   |
|    |    |                                | |   |
|    |    +--------------------------------+ |   |
|    +---------------------------------------+   |
+------------------------------------------------+

A and C can communicate because they are from the same domain.

C just contains a small script which listens for URL parameters and calls methods in A.

B sets the src attribute of C with the appropriate URL parameters.

Edit: This post explains it even better, with a real diagram and everything!

Community
  • 1
  • 1
N3dst4
  • 6,360
  • 2
  • 20
  • 34
  • thank you. looks like a great idea. i'll accept your answer. i resolved the issue by using div instead of iframe. but if i had to use iframe this solution would be perfect. – ufk Jan 01 '12 at 10:59