javascript - How do I prevent Google Chrome from blocking my popup?

Question

On my website there is a button that just used to call a function that calls window.open, however, recently an adjustment was needed to do a server-side check before the popup was opened.

Ever since the code was added that does the AJAX call, browsers blocks the popup, that is opened in the success callback of the AJAX call. I read that browsers might block the popup if it's not called by a user click event, so I tried setting the AJAX request to async: false, which solved the problem in Firefox, but Google Chrome still keeps blocking my popup. Is there any way to get around this?

I could move the server-side check to the page that gets opened in the popup, but I'd like to do it before opening the popup, if possible.

Code:

<a id="attackButton" href="#">Attack Base!</a>

<script type="text/javascript">
$(function() {
    $('#attackButton').click(function() {
        $.ajax({
            url: baseurl + '/index.php?option=com_pbbgs&format=raw&getinfo=goingame',
            data: { 'gameid': 618 },
            dataType: 'text',
            async: false,
            type: 'POST',
            success: function(data) {
                eval(data);

                if (window.gameURL) {
                    goingameRaw();
                }
            }
        });

        return false;
    });
});

function goingameRaw()
{
    window.open(window.gameURL,'test','left=20,top=20,width=1024,height=640,toolbar=0,resizable=0,location=0');
}
</script>

Example response body:

window.gameURL="http://mydomain.com/index.php?option=com_pbbgs&format=raw&startgame=618&width=1024&height=640";checktutorial('js','attack');

Answer 1

Yes, popups should be a direct result of a user action. Doing them in ajax callback will not do the trick. Also, using async:false is bad - in FF it is known to block the whole browser. Think of some other way to do the check:

• it could be the first thing you do in the popup
• you can open the popup on click and manipulate it later when the callback fires
• you can require the user to click again some button to trigger the popup (probably the worst solution)
• you can do it on page load