How do I prevent Google Chrome from blocking my popup?

妖精的绣舞 提交于 2019-11-26 17:36:51

问题


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');

回答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



回答2:


Following up on Emil's excellent answer, "you can open the popup on click and manipulate it later when the callback fires". I used this implementation.

$('#attackButton').click(function() {

New code here

    var win = window.open('');
    window.oldOpen = window.open;
    window.open = function(url) { // reassignment function
        win.location = url;
        window.open = oldOpen;
        win.focus();
    }

end new code

    $.ajax({
        url: baseurl + '/index.php',
        data: { 'gameid': 618 },
        type: 'POST',
        success: function(data) {
            window.open('some url'); // will call reassignment function above 
        }
    });

    return false;
});



回答3:


You can open a window that is not blocked just under the onclick event, if you open it on ajax call it is considered popup. However I used this method with success for some time to open a popup and not be blocked.

http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/




回答4:


In my case the window.open was launched inside a promise in angular, which turned the popup blocker on, my solution was:

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
      browserService. updateTabLocation(res.url, myNewTab);
    }
  );
};

browserService:

this.openNewTab = function(){
  var newTabWindow = $window.open();
  return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
  if(!tabLocation){
    tab.close();
  }
  tab.location.href = tabLocation;
}

this is how you can open a new tab using the promise response and not invoking the popup blocker.




回答5:


The previous solution did not work for me, but I based on it and used named window.

internalCounter++;
var tabbedWin = window.open('','windowName_'+internalCounter);
$.ajax({
        url: url,
        async: false,
        indexValue:internalCounter,
        success: function(){
            var w= window.open(url, 'windowName_'+this.indexValue);                
            w.focus();
        }
})



回答6:


I use this method:

  1. Redirect to the same page with download url added as parameter:
window.location.href = window.location.protocol + '//' +
                    window.location.host + window.location.pathname +
                    "?download=" + encodeURIComponent(urlToDownload)
  1. Detect this parameter on page initialization and redirect to download:
function param(name){
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (!results) { return 0; }
    return results[1] || 0;
}

var downloadParam = param('download');
if (downloadParam) {
    window.location = decodeURIComponent(downloadParam);
}


来源:https://stackoverflow.com/questions/4602964/how-do-i-prevent-google-chrome-from-blocking-my-popup

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!