javascript 发布到 Facebook 后如何关闭弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15180676/
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
How do I close the popup after I post to facebook?
提问by user_78361084
On our blog we have a link where users can post our articles to their timeline. A popup opens up and the user posts to facebook, then the popup stays there and redirects to "www.oursite.com". How do we instead close the popup when the user either finishes posting or clicks on the cancel button? According to this so questionit can't be done but Huffington post has figured it out but looking at their code we can't figure it out. As an example, the facebook sharebutton here will open up a popup and then close when you either post the article or cancel.
在我们的博客上，我们有一个链接，用户可以在其中将我们的文章发布到他们的时间线。一个弹出窗口打开，用户发布到 facebook，然后弹出窗口停留在那里并重定向到“www.oursite.com”。当用户完成发布或点击取消按钮时，我们如何关闭弹出窗口？根据this so question，它无法完成，但赫芬顿的帖子已经弄清楚了，但是查看他们的代码我们无法弄清楚。例如，此处的 facebook 分享按钮将打开一个弹出窗口，然后在您发布文章或取消时关闭。
Here's what we have:
这是我们所拥有的：
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);
}
We've tried adding window.close(); in the callback (and also self.close();), tried leaving redirect_uri blank (and tried leaving redirect_uri out altogether, but it's required).
我们已经尝试添加 window.close(); 在回调（以及 self.close();）中，尝试将 redirect_uri 留空（并尝试将 redirect_uri 完全保留，但这是必需的）。
采纳答案by undefinederror
As of 10/2017 removing redirect_uriseems to work.
截至 2017 年 10 月，删除redirect_uri似乎有效。
It will default to https://www.facebook.com/dialog/return/close#_=_
它将默认为https://www.facebook.com/dialog/return/close#_=_
whose source is just <script type="text/javascript"> window.close() </script>
谁的来源只是 <script type="text/javascript"> window.close() </script>
回答by jwhazel
It seems that the accepted answer is no longer working due to the fact that facebook now strips anything after a hash and replaces it with post_id=xxxxx.
似乎已接受的答案不再有效，因为 facebook 现在在散列后删除任何内容并将其替换为 post_id=xxxxx。
Solution #1(if you trust FB not to change this in the near future):
解决方案 #1（如果您相信 FB 在不久的将来不会改变它）：
if(window.location.search.indexOf('post_id')==1) window.close();
Solution #2(if you want a little more insurance against change and don't mind a second file): Create a new html file closewindow.html:
解决方案#2（如果您想要更多的保险以防止更改并且不介意第二个文件）：创建一个新的 html 文件 closewindow.html：
<html><body><script>window.close()</script></body></html>
and link to it in the redirect.
并在重定向中链接到它。
回答by Trevor Dixon
Redirect to http://oursite.com/#close_window. Then on your site's homepage, include something like this:
重定向到http://oursite.com/#close_window。然后在您网站的主页上，添加如下内容：
if (window.location.hash == '#close_window') window.close();.
if (window.location.hash == '#close_window') window.close();.
回答by Steven
After spending a whole day working on this problem, I have a very good solution that I'd like to share. Instead of using the SDK with FB.ui(), I have discovered that I can avoid it entirely by manually opening my own popup to https://www.facebook.com/dialog/feed. When doing it this way, redirect_uri works as expected. As long as you require the user to click a button to make the dialog pop up, no popup blocker will be triggered.
在花了一整天的时间解决这个问题之后，我有一个非常好的解决方案，我想分享一下。我发现我没有将 SDK 与 FB.ui() 一起使用，而是通过手动打开我自己的弹出窗口到https://www.facebook.com/dialog/feed来完全避免它。这样做时，redirect_uri 按预期工作。只要您要求用户单击按钮使对话框弹出，就不会触发弹出窗口阻止程序。
I don't believe there are any compromises with this code, and if anything, it is much easier to use than the actual SDK.
我不相信这段代码有任何妥协，如果有的话，它比实际的 SDK 更容易使用。
My Javascript code (which you can save as FacebookFeedDialog.js) looks like this:
我的 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');
}
Here's a sample HTML file that uses the Javascript code above:
这是一个使用上述 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>
Your closeWindow html file can look like this:
您的 closeWindow html 文件可能如下所示：
<SCRIPT>
window.close();
</SCRIPT>
回答by kaujourdhui
UPDATE: Add this script to your redirect page:
更新：将此脚本添加到您的重定向页面：
if (document.referrer == "https://www.facebook.com/" && (window.location.href.indexOf('post_id=') != -1 || window.location.hash == '#_=_')) {
window.close();
}
回答by Afzal Gogda
回答by Seth
This is not a direct answer to the original question, but it might help others arriving here.
这不是对原始问题的直接回答，但它可能会帮助其他人到达这里。
There is a more robust way to do this that allows you take action on the originating page when the share has completed successfully:
有一种更可靠的方法可以让您在共享成功完成后在原始页面上执行操作：
In the originating page:
在原始页面中：
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...
}
}
In the page you have set as your redirect_uri, which I usually map to something like http://myserver.com/share/close:
在您设置为您的页面中redirect_uri，我通常将其映射为http://myserver.com/share/close：
window.opener.shareCompleted();
Now you're assured the share window will close and you'll be able to take action on the originating page if needed.
现在，您可以确信共享窗口将关闭，并且您可以在需要时在原始页面上执行操作。
Note: shareCompletedmust be available in the root window namespace for this work. If you're wrapping all of your JavaScript as you should be, then be sure to:
注意：shareCompleted必须在此工作的根窗口命名空间中可用。如果您按原样包装所有 JavaScript，请确保：
window.shareCompleted = shareCompleted;
回答by Juan David Nicholls Cardona
<script>if (window.location.hash.indexOf("#close_window") != -1) window.close();</script>
