How to close a facebook SDK dialog opened with FB.ui()?

问题

I'm successfully displaying an invite friend dialog (code shown below). When user clicks skip the iframe/dialog shows a new page. However from this point I can't find a way how to close the iframe/dialog. FB.ui doesn't return any object, there doesn't seem to be a Javascript SDK method and traversing and manipulating with the DOM will be brittle to any FB code changes.

Any ideas?

function popupInviteForm(actionUrl) {
    var fbmlString = '<fb:fbml>' +
              '   <fb:request-form type="POST" content="Play against me in game?" action="' + actionUrl + '" method="post" >' +
              '       <fb:multi-friend-selector target="_self" exclude_ids="" max="20" cols="4" rows="3" showborder="false" actiontext="Invite friends!" />' +
              '   </fb:request-form>' +
              '</fb:fbml>';

    FB.ui({
        method: 'fbml.dialog',
        fbml: fbmlString,
        display: 'dialog',
        size: {width:640,height:480}, width:640, height:480
    });

    $(".FB_UI_Dialog").css('width', $(window).width()*0.8);
}

(Note: I have posted the same question on the facebook forum with no response. I will update both, should there be an answer on either.)

The Javascript code was adapted from a stack overflow answer.

回答1:

I have same trouble. Second day looking for a solution. And just found one way: for closing active FB dialog you should perform followed code in parent window where FB JS is available and where FB.ui was called:

FB.Dialog.remove(FB.Dialog._active);

So, if you want your invite dialog auto closes and don't redirects to any other page, use these steps:

1) Set target attr of and as "_self":

target="_self"

2) create some callback url/page on your site, for example https://mysite/close_dialog.html

3) Set action attr of as just created url:

action="http://mysite/close_dialog.html"

4) In your close_dialog.html put followed JS:

    <script type="text/javascript">
        if (document.location.protocol == 'https:') {
            document.location = 'http://mysite/close_dialog.html';
        } else {
            top.window.FB.Dialog.remove(top.window.FB.Dialog._active);
        };
    </script>

UPDATE:

5) There is one issue else in this way: FB iframe loaded by https, but if request-form 'action' attr uses 'http' - user will get browser warning. But if request-form 'action' has 'https' - iframe js cant access to parent loaded by 'http'. So, its the reason why you should use action by 'https'

Hope this helps

If you has better solution or you can improve this way - please let all know this, Thanks for any comments

回答2:

That doesn't work (at least not for me).

What I did was simply call the javascript window.close(); function instead of top.window.FB.Dialog.remove(top.window.FB.Dialog._active); and it works.

<script type="text/javascript">
    if (document.location.protocol == 'https:') {
        document.location = 'http://mysite/close_dialog.html';
    } else {
        //alert('some message');
        window.close();
    };
</script>

回答3:

i found Igor Reshetnikov's answer did work, but only if i made sure to declare both pages - The one that opens the dialog and close_dialog.html - as part of the same domain using document.domain. so at the top of the script tags in both pages you'ld had to add this line

document.domain = 'mysite.com';

obviously replacing mysite.com with what ever your domain is

回答4:

The FB.ui provides an option for a callback function which will be executed after the FB.ui is completed.

FB.ui(
  {
    method: '..........',
    ..................
  },
  function(response) {
    //write your code here
  }
);

Will this help to solve your problem?

回答5:

This closes all dialogs, but may not work with future releases due to access of internal variable _loadedNodes

if (FB && FB.UIServer && FB.UIServer._loadedNodes) {
  var nodes = FB.UIServer._loadedNodes;
  if (nodes) {
    for (var item in nodes) {
      if (nodes[item].type && nodes[item].node && nodes[item].node.close &&
 nodes[item].type === "popup") {
        nodes[item].node.close();
      }
    }
  }
}

回答6:

FWIW, my browser's privacy plugin was preventing FB from closing the dialog. I just switched off the privacy plugin and dialog closed itself as expected.

来源：https://stackoverflow.com/questions/4646441/how-to-close-a-facebook-sdk-dialog-opened-with-fb-ui