javascript 如何关闭使用 FB.ui() 打开的 Facebook SDK 对话框?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4646441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 14:25:02  来源:igfitidea点击:

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

javascriptfacebookfacebook-javascript-sdk

提问by Nick

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.

我成功地显示了邀请朋友对话框(代码如下所示)。当用户点击跳过 iframe/对话框显示一个新页面。但是从这一点上我找不到如何关闭 iframe/对话框的方法。FB.ui 不返回任何对象,似乎没有 Javascript SDK 方法,遍历和操作 DOM 对任何 FB 代码更改都很脆弱。

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 forumwith no response. I will update both, should there be an answer on either.)

(注意:我在facebook 论坛上发布了同样的问题,但没有回应。如果有答案,我会更新两者。)

The Javascript code was adapted from a stack overflow answer.

Javascript 代码改编自堆栈溢出答案

回答by Igor Reshetnikov

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 对话框,您应该在 FB JS 可用且调用 FB.ui 的父窗口中执行以下代码:

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":

1) 将和的目标属性设置为“_self”:

target="_self"

目标=“_自我”

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

2)例如在您的网站上创建一些回调网址/页面 https://mysite/close_dialog.html

3) Set action attr of as just created url:

3)将动作属性设置为刚刚创建的网址:

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

动作="http://mysite/close_dialog.html"

4) In your close_dialog.html put followed JS:

4)在你的 close_dialog.html 中加入以下 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'

5) 以这种方式还有一个问题:FB iframe 由 https 加载,但如果 request-form 'action' attr 使用 'http' - 用户将收到浏览器警告。但是,如果请求表单“动作”具有“https”-iframe js 无法访问由“http”加载的父级。所以,这就是你应该使用“https”操作的原因

Hope this helps

希望这可以帮助

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

如果您有更好的解决方案或可以通过这种方式改进 - 请让所有人知道这一点,感谢您的任何评论

回答by Luis Fernando

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.

我所做的只是调用 javascript window.close(); 函数代替 top.window.FB.Dialog.remove(top.window.FB.Dialog._active); 它有效。

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

回答by nathajamal

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

我发现 Igor Reshetnikov 的答案确实有效,但前提是我确保将两个页面(打开对话框和 close_dialog.html 的页面)声明为使用 document.domain 的同一域的一部分。所以在两个页面的脚本标签的顶部,你必须添加这一行

document.domain = 'mysite.com';

obviously replacing mysite.com with what ever your domain is

显然用你的域名替换 mysite.com

回答by Bennet

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

FB.ui 为回调函数提供了一个选项,该函数将在 FB.ui 完成后执行。

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

Will this help to solve your problem?

这是否有助于解决您的问题?

回答by James Westgate

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

这将关闭所有对话框,但由于访问内部变量,可能不适用于未来版本 _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();
      }
    }
  }
}

回答by robbie b

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.

FWIW,我浏览器的隐私插件阻止了 FB 关闭对话框。我刚刚关闭了隐私插件,对话框按预期关闭了。