Всплывающее окно window.open блокируется во время события клика

Question

Что мне в конечном итоге нужно сделать, это запустить $.ajax() позвоните, а затем, после этого, откройте новое окно.

Пользователь нажимает кнопку "Предварительный просмотр", которая сохраняет текущую форму, а затем открывает новое окно, в котором отображается предварительный просмотр элемента с только что сохраненными данными.

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

Вот основные части моего кода:

HTML:

<a href="/surveys/185/preview" class="preview" target="_blank">Preview</a>

JavaScript:

$('.preview').live('click', function(event){
  save_survey($(this).attr('href'));
  event.preventDefault();
});

function save_survey(url) {
  $.ajax({
    type: "POST",
    url: form_url,
    dataType: 'json',
    data: form_data,
    success: function(data) {
      window.open(url, '_blank');
    }
  });
}

Answer 1

I ran into this problem recently and found this work-around:

1) call window.open как раз перед звонком $.ajax and save window reference:

var newWindow = window.open(...);

2) on callback set location property of the saved window reference:

newWindow.location = url;

Может быть, это вам тоже поможет.

Answer 2

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

Если вы используете ajax-запрос к событию click, запрос запускается асинхронно с событием click, поэтому к тому времени, когда ajax-запрос выполнил свою работу, и вы получите ваше событие с ответом на запрос, вы потеряли свой шанс вызвать window.open без блокировщика всплывающих окон, исходное событие щелчка уже давно мертво.

Answer 3

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

Answer 4

Я решил свой случай, сделав вызов Ajax синхронным. Например (с JQuery):

$("form").submit(function(e){
    e.preventDefault();
    $.ajax({
      async: false,
      url: ...,
      data: ...,
      success: function(results){
          if(results.valid){
              window.open(...);
          }
      }
    });
    return false;
  });

Answer 5

const newWin = window.open(`${BASE_URL}`, 'expampleName')
if (newWin) {
  newWin.onload = () => {
    const currentOpenWindow = newWin
    const href = newWin.location.href
  }
}