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

时间:2013-03-02 23:33:25

标签: javascript jquery facebook sdk dialog

在我们的博客上,我们有一个链接,用户可以将文章发布到他们的时间表。弹出窗口打开并且用户发布到Facebook,然后弹出窗口停留在那里并重定向到“www.oursite.com”。当用户完成发布或点击取消按钮时,我们如何关闭弹出窗口?根据{{​​3}},它无法完成,但赫芬顿的帖子已经弄明白,但看着他们的代码,我们无法弄明白。 例如,此处的this so question按钮会打开一个弹出窗口,然后在您发布文章或取消时关闭。

以下是我们所拥有的:

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,但这是必需的。)

8 个答案:

答案 0 :(得分:17)

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

并在重定向中链接到它。

答案 1 :(得分:15)

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

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

答案 2 :(得分:8)

在花了一整天的时间研究这个问题后,我有一个非常好的解决方案,我想分享。我没有使用带有FB.ui()的SDK,而是发现我可以通过手动打开自己的弹出窗口https://www.facebook.com/dialog/feed来完全避免它。这样做时,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>

答案 3 :(得分:3)

更新: 将此脚本添加到重定向页面:

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

答案 4 :(得分:3)

截至10月10日,删除redirect_uri似乎有效。

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

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

答案 5 :(得分:2)

只需从网址中删除redirect_uri参数。

here

答案 6 :(得分:1)

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

有一种更强大的方法可以让您在共享成功完成后对原始页面采取措施:

在原始页面中:

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;

答案 7 :(得分:0)

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