发布到 Facebook 后如何关闭弹出窗口？

Question

在我们的博客上，我们有一个链接，用户可以将我们的文章发布到他们的时间线。打开一个弹出窗口，用户发布到 facebook，然后弹出窗口停留在那里并重定向到“www.oursite.com”。当用户完成发布或单击取消按钮时，我们如何关闭弹出窗口？根据this so question，它无法完成，但赫芬顿邮报已经弄清楚了，但是查看他们的代码我们无法弄清楚。 例如，此处的the facebook share 按钮将打开一个弹出窗口，然后在您发布文章或取消文章时关闭。

这就是我们所拥有的：

FB.init({appId: "90210", status: true, cookie: true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri: 'http://www.oursite.com/',
          link: 'http://www.oursite.com/',
          picture: 'http://www.oursite.com/png.png',
          name: 'Some title',
          caption: '',
          description: ''
        };

        function callback(response){
           window.close(); // doesn't do anything
          //document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

我们已经尝试添加 window.close();在回调（以及 self.close();）中，尝试将 redirect_uri 留空（并尝试将 redirect_uri 完全留空，但这是必需的）。

Answer 1

截至 2017 年 10 月，删除 redirect_uri 似乎有效。

默认为https://www.facebook.com/dialog/return/close#_=_

其来源只是 <script type="text/javascript"> window.close() </script>

Answer 2

只需从 url 中删除 redirect_uri 参数即可。

点赞here。

Answer 3

更新： 将此脚本添加到您的重定向页面：

if (document.referrer == "https://www.facebook.com/" && (window.location.href.indexOf('post_id=') != -1 || window.location.hash == '#_=_')) {
    window.close();
}

Answer 4

这不是对原始问题的直接回答，但它可能会帮助其他到达这里的人。

有一种更强大的方法可以让您在共享成功完成后对原始页面执行操作：

在原始页面中：

var shareWindow;

function openShareWindow() {
  // See https://developers.facebook.com/docs/sharing/reference/share-dialog
  shareWindow = window.open('https://www.facebook.com/dialog/share?app_id=...&display=popup&redirect_uri=...');
}

function shareCompleted() {
  if (shareWindow) {
    shareWindow.close();
    shareWindow = null;

    // The share was successful, so do something interesting here...
  }
}

在您设置为redirect_uri 的页面中，我通常将其映射为http://myserver.com/share/close：

window.opener.shareCompleted();

现在您确信共享窗口将关闭，并且您可以在需要时对原始页面采取行动。

注意：shareCompleted 必须在根窗口命名空间中才能使用。如果您按照应有的方式包装所有 JavaScript，请确保：

window.shareCompleted = shareCompleted;

Answer 5

<script>if (window.location.hash.indexOf("#close_window") != -1) window.close();</script>

Answer 6

花了一整天的时间解决这个问题后，我有一个非常好的解决方案，我想分享一下。我发现我可以通过手动打开我自己的弹出窗口到https://www.facebook.com/dialog/feed 来完全避免它，而不是使用带有 FB.ui() 的 SDK。这样做时，redirect_uri 按预期工作。只要您要求用户单击按钮使对话框弹出，就不会触发弹出窗口拦截器。

我认为这段代码没有任何妥协，如果有的话，它比实际的 SDK 更容易使用。

我的 Javascript 代码（可以保存为 FacebookFeedDialog.js）如下所示：

/* by Steven Yang, Feb 2015, originally for www.mathscore.com.  This code is free for anybody to use as long as you include this comment.  */
function FacebookFeedDialog(appID, linkTarget, redirectTarget) {
  this.mParams = {
    app_id: appID,
    link: linkTarget,
    redirect_uri: redirectTarget,
    display: "popup"
  }
};

/* Common params include:
   name - the title that appears in bold font
   description - the text that appears below the title
   picture - complete URL path to the image on the left of the dialog
   caption - replaces the link text
*/
FacebookFeedDialog.prototype.addParam = function(key, value) {
  this.mParams[key] = value;
};

FacebookFeedDialog.prototype.open = function() {

  var url = 'https://www.facebook.com/dialog/feed?' + encodeCGIArgs(this.mParams);
  popup(url, 'feedDialog', 700, 400);
};

/* Takes a param object like this:
   { arg1: "value1", arg2: "value2" }
   and converts into CGI args like this:
   arg1=value1&arg2=value2

   The values and args will be properly URI encoded
*/
function encodeCGIArgs(paramObject) {

  var result = '';

  for (var key in paramObject) {
    if (result)
      result += '&';
    result += encodeURIComponent(key) + '=' + encodeURIComponent(paramObject[key]);
  }

  return result;
}

function popup(mylink,windowname,width,height) {
  if (!window.focus) return;
  var href;
  if (typeof(mylink) == 'string')
    href=mylink;
  else
    href=mylink.href;
  if (!windowname)
    windowname='mywindow';
  if (!width)
    width=600;
  if (!height)
    height=350;
  window.open(href, windowname, 'resizable=yes,width='+width+',height='+height+',scrollbars=yes');
}

这是一个使用上述 Javascript 代码的示例 HTML 文件：

<HTML>
<BODY>
<SCRIPT type="text/javascript" src="FacebookFeedDialog.js"></SCRIPT>
<SCRIPT>
var dialog = new FacebookFeedDialog(yourAppIDGoesHere,yourDestinationURLGoesHere,yourCloseWindowURLGoesHere);
dialog.addParam('name','This is my title');
dialog.addParam('description','This is the description');
dialog.addParam('picture',yourImageURLGoesHere);
dialog.addParam('caption','This is the caption');
</SCRIPT>

<A href="javascript:dialog.open()">Open facebook dialog</A>
</BODY>
</HTML>

您的 closeWindow html 文件可能如下所示：

<SCRIPT>
window.close();
</SCRIPT>

Answer 7

似乎已接受的答案不再有效，因为 facebook 现在会在哈希后删除任何内容并将其替换为 post_id=xxxxx。

解决方案 #1（如果您相信 FB 在不久的将来不会更改此设置）：

if(window.location.search.indexOf('post_id')==1) window.close();

解决方案 #2（如果您想要更多的保险来应对变化并且不介意第二个文件）： 新建一个html文件closewindow.html：

<html><body><script>window.close()</script></body></html>

并在重定向中链接到它。

Answer 8

重定向到http://oursite.com/#close_window。然后在您网站的主页上添加如下内容：

if (window.location.hash == '#close_window') window.close();.