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

Question

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

这是我们所拥有的：

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 完全留空，但这是必需的）。

score 17 · Accepted Answer

似乎接受的答案不再有效，因为 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>

并在重定向中链接到它。

score 15 · Accepted Answer

重定向到http://oursite.com/#close_window。然后在您网站的主页上，包含以下内容：

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

score 8 · Accepted Answer

在花了一整天的时间解决这个问题之后，我有一个非常好的解决方案，我想分享一下。我发现我可以通过手动打开我自己的弹出窗口到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>

score 4 · Accepted Answer

截至 10/2017 删除redirect_uri似乎有效。

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

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

2

只需redirect_uri从 url 中删除参数。

喜欢这里。

于 2016-06-07T09:45:18.817 回答

score 1 · Accepted Answer

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

有一种更强大的方法可以做到这一点，当共享成功完成时，您可以在原始页面上执行操作：

在原始页面中：

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;

score 0 · Accepted Answer

0

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

于 2013-11-20T04:34:15.383 回答

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

8 回答 8

Related

Reference