如何阻止Google Chrome阻止弹出窗口？

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.

在我的网站上有一个按钮,用于调用一个调用window.open的函数,但是,最近需要在弹出窗口打开之前进行服务器端检查。

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?

自从添加了代码进行AJAX调用之后,浏览器就会阻止弹出窗口,这是在AJAX调用的成功回调中打开的。我读过浏览器可能会阻止弹出窗口,如果它没有被用户点击事件调用,所以我尝试将AJAX请求设置为async:false,这解决了Firefox中的问题,但谷歌Chrome仍然阻止我的弹出窗口。有没有办法解决这个问题?

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

6 个解决方案

#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:

是的,弹出窗口应该是用户操作的直接结果。在ajax回调中执行它们不会起作用。另外,使用async:false很糟糕 - 在FF中,已知会阻止整个浏览器。想一想其他方法来做检查:

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.

继Emil的优秀答案之后,“你可以点击弹出窗口,稍后在回调触发时操纵它”。我用过这个实现。

$('#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.

您可以在onclick事件下打开一个未被阻止的窗口,如果在ajax调用中打开它,则会将其视为弹出窗口。但是我使用这种方法成功了一段时间来打开弹出窗口而不是被阻止。

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:

在我的情况下,window.open是在angular中的promise中启动的,它打开了弹出窗口阻止程序,我的解决方案是:

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
      browserService.updateLocation(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.

这是使用promise响应打开新选项卡而不是调用弹出窗口阻止程序的方法。

#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:

我用这个方法:

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)

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

#1

it could be the first thing you do in the popup