javascript - 在用户单击 ajax 调用后打开没有弹出窗口阻止程序的新选项卡

Question

我有一个页面，允许用户通过 HTML5 canvas 执行图像操作，在该页面上，有一个 facebook 共享按钮，用于在 facebook 上共享 canvas 生成的图像。

当链接被点击时，一个ajax请求被发送到服务器(ASP.NET MVC)来执行图像生成，将图像保存在服务器上，然后生成一个返回的url(链接到图像)作为ajax响应。返回的 url 是我想作为参数传递给 facebook 分享的内容。问题是弹出窗口阻止程序在我调用“window.open”时阻止了 facebook 共享对话框。

有没有其他方法可以在没有弹出窗口阻止程序的情况下打开新标签页。我相信既然用户发起了这个 Action ，我应该有办法绕过弹出窗口拦截器。谢谢。

Answer 1

2014 年 10 月更新:

评论中正确指出，Firefox 已于 2014 年 6 月弃用同步设置，但它仍在该浏览器中工作。

此外，Chrome 收到了更新，如果 ajax 调用在不到一秒内返回，这将只允许它按需要工作。这很难保证。我创建了另一个专门针对 Chrome 超时的问题: Synchronous Ajax - does Chrome have a timeout on trusted events?

链接的帖子包含一个 JSFiddle 演示这个概念和问题。

原始答案

简短回答:使 ajax 请求同步。

完整答案:如果打开选项卡/弹出窗口的命令来自 trusted event，浏览器只会打开没有弹出窗口阻止程序警告的选项卡/弹出窗口。 .这意味着:用户必须主动点击某处才能打开弹出窗口。

在您的情况下，用户执行了一次点击，因此您拥有可信事件。但是，通过执行 Ajax 请求，您确实失去了可信的上下文。您的成功处理程序不再有该事件。避免这种情况的唯一方法是执行同步 Ajax 请求，该请求将在浏览器运行时阻止它，但会保留事件上下文。

在 jQuery 中，这应该可以解决问题:

$.ajax({
 url: 'http://yourserver/',
 data: 'your image',
 success: function(){window.open(someUrl);},
 async: false
});