Open new tab without popup blocker after ajax call on user click

Question

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.

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.

Dode

Check the solutions given here #4908343 – Sudd

None of the solution in the answers works for me. Still getting popup blocker. – Dode

This doesn't directly answer the question, but is a last-resort if you can't do it any other way: Instead of opening the URL in a new browser tab, you could create a link on the page for the user to click that opens the URL to a new tab. – Vertebra

Answer 1

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.

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?

The linked post contains a JSFiddle demonstrating this concept and the problem.

Original Answer

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.

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.

In jQuery this should do the trick:

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

Allonym

@AnkitChauhan do you care to elaborate? It's still working in all browsers I know... – Oliguria

Adding async:false makes chrome stop blocking about a third of the blockups for me. The rest still get blocked. All are blocked without async:false. This still helped for me though because I solved it in another way with this knowledge. I opened a blank window on the onclick-handler and also make an ajax-request(async or not doesn't really matter), which when finishes writes to the created window. – Moriarty

This works great and is simply genious to solve that big issue!! – Gabler

On chrome it won't work for firefox async false is been deprecatred – Skaggs

@kunal-vashist Thanks for the note, Mozilla indeed deprecated synchronous XHR requests with the release of Firefox 30 in June 2014 (developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…). It does still work both in Firefox and in Chrome. There is one thing worth noting: Chrome seems to have a 1 second timeout in which the call needs to be finished. See this related entry: #25446625 (I do not know since when) – Oliguria

They key part here for me is that it is the 'trusted event' that avoids the pop-up blocker (at least in chrome). – Pretor

Please move the update up and the older workaround to the bottom. – Mcneal

Answer 2

Here's how I got round the issue of my async ajax request losing the trusted context:

I opened the popup directly on the users click, directed the url to about:blank and got a handle on that window. You could probably direct the popup to a 'loading' url while your ajax request is made

var myWindow = window.open("about:blank",'name','height=500,width=550');

Then, when my request is successful, I open my callback url in the window

function showWindow(win, url) {
    win.open(url,'name','height=500,width=550');
}

Egotist

Answer 3

The answer from wsgeorge is the one that got me on the right track. Here is a function that hopefully illustrates the technique more clearly.

function openNewAjaxTab(url) {
    var tabOpen = window.open("about:blank", 'newtab'),
        xhr = new XMLHttpRequest();

    xhr.open("GET", '/get_url?url=' + encodeURIComponent(url), true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            tabOpen.location = xhr.responseText;
        }
    }
    xhr.send(null);
}

Nagari

When window.open("about:blank", 'newtab') works it opens a new tab. When tabOpen.location = xhr.responseText; works, it changes tabOpen objects location prop, however, a new windows url does not redirect to setted url on tabOpen. – Chappelka