在用户单击ajax调用后打开没有弹出窗口阻止程序的新选项卡 [英] Open new tab without popup blocker after ajax call on user click

问题描述

我有一个页面，允许用户通过HTML5画布执行图像处理，在页面上，有一个Facebook分享按钮，用于在Facebook上共享生成的画布图像。

I have a page that enable user to perform image manipulation via HTML5 canvas, on the page, there's a facebook share button for sharing a generated image of the canvas on facebook.

单击链接时，会向服务器（ASP.NET MVC）发送ajax请求以执行映像生成，将映像保存在服务器上，然后生成作为ajax响应返回的url（链接到图像）。返回的url是我想要传递的Facebook要分享的参数。问题是，当我调用window.open时，弹出窗口阻止程序阻止了facebook共享对话框。

When the link is clicked, an ajax request is sent to the server (ASP.NET MVC) to perform the image generation, save the image on the server, then generate a url(that links to the image) that is returned as the ajax response. The returned url is what I want to pass as the parameter for facebook to share. The issue is that popup blocker is blocking facebook share dialog when I call "window.open".

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

Is there any other way to open a new tab without popup blocker. I believe that since the user initiated the action, there should be a way for me to bypass popup blocker. Thanks.

推荐答案

简答：让ajax请求同步。

Short answer: Make the ajax request synchronous.

完整答案：
如果打开选项卡/弹出窗口的命令来自可信事件。这意味着：用户必须主动点击某处以打开弹出窗口。

Full answer: A browser will only open a tab/popup without the popup blocker warning, if the command to open the tab/popup comes from a trusted event. That means: The user has to actively click somewhere to open a popup.

在您的情况下，用户执行单击以便您拥有受信任的事件。但是，通过执行Ajax请求，您确实失去了可信上下文。您的成功处理程序不再具有该事件。
规避这个问题的唯一方法是执行同步Ajax请求，它会在浏览器运行时阻塞它，但会保留事件上下文。

In your case, the user performs a click so you have the trusted event. You do loose that trusted context however, by performing the Ajax request. Your success handler does not have that event any more. The only way to circumvent this is to perform a synchronous Ajax request which will block your browser while it runs, but will preserve the event context.

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

In jQuery this should do the trick:

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

2014年10月更新：

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

Update Oct 2014:

It was noted correctly in the comments, that Firefox has deprecated the synchronous setting in June 2014, but it is still working in this browser.

此外，Chrome收到的更新只允许如果ajax调用在不到一秒的时间内返回，则按需要工作。这是很难保证的。我已经创建了另一个专门针对Chrome超时的问题：
同步Ajax - Chrome在可信事件上是否超时？

Furthermore, Chrome received updates which will only allow this to work as wanted if the ajax call returns in less than a second. Which is rather hard to gurantee. I've created another question devoted to the Chrome timeout: Synchronous Ajax - does Chrome have a timeout on trusted events?

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

这篇关于在用户单击ajax调用后打开没有弹出窗口阻止程序的新选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！