Как запретить Google Chrome блокировать мое всплывающее окно?

Question

На моем веб-сайте есть кнопка, которая просто используется для вызова функции, которая вызывает window.open, однако недавно потребовалась настройка для проверки на стороне сервера перед открытием всплывающего окна.

С тех пор, как был добавлен код, который выполняет вызов AJAX, браузеры блокируют всплывающее окно, которое открывается в обратном вызове success вызова AJAX. Я читал, что браузеры могут блокировать всплывающее окно, если оно не вызывается событием пользовательского щелчка, поэтому я попытался установить для запроса AJAX значение async: false, что решило проблему в Firefox, но Google Chrome по-прежнему блокирует мое всплывающее окно. Есть ли способ обойти это?

Я мог бы переместить проверку на стороне сервера на страницу, которая открывается во всплывающем окне, но я хотел бы сделать это перед открытием всплывающего окна, если это возможно.

Код:

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

Пример тела ответа:

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

Answer 1

Да, всплывающие окна должны быть прямым результатом действий пользователя.Выполнение их в обратном вызове Ajax не поможет.Кроме того, использование async:false плохо - известно, что в FF блокируется весь браузер.Подумайте о другом способе проверки:

• это может быть первое, что вы делаете во всплывающем окне
• , вы можете открыть всплывающее окно при нажатии и манипулировать им позже, когда вызываетсяfires
• вы можете потребовать, чтобы пользователь снова нажал какую-то кнопку, чтобы вызвать всплывающее окно (вероятно, худшее решение)
• вы можете сделать это при загрузке страницы

Answer 2

В ответ на отличный ответ Эмиля: «Вы можете открыть всплывающее окно при нажатии и манипулировать им позже, когда сработает обратный вызов». Я использовал эту реализацию.

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

Новый код здесь

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

конец нового кода

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

    return false;
});

Answer 3

Вы можете открыть окно, которое не заблокировано только под событием onclick, если вы открываете его при вызове ajax, оно считается всплывающим. Однако в течение некоторого времени я успешно использовал этот метод, чтобы открыть всплывающее окно и не быть заблокированным.

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

Answer 4

В моем случае window.open был запущен внутри углового promise, что включало блокировку всплывающих окон, мое решение было:

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

так вы можете открыть новую вкладку, используя ответ promise и не вызывая блокировщик всплывающих окон.

Answer 5

Я использую этот метод:

1. Перенаправление на ту же страницу с URL-адресом загрузки, добавленным в качестве параметра:

window.location.href = window.location.protocol + '//' +
                    window.location.host + window.location.pathname +
                    "?download=" + encodeURIComponent(urlToDownload)

2. Определите этот параметр при инициализации страницы и перенаправьте на загрузку:

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

Answer 6

Предыдущее решение у меня не сработало, но я на его основе и использовал именованное окно.

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