Обход блокировщика всплывающих окон в window.open, когда установлено JQuery event.preventDefault ()

Я хочу отображать диалоговое окно JQuery условно при щелчке гиперссылки.

У меня есть требование, например, при условии 1 открыть диалог JQuery, и если условие 1 не выполняется, перейдите на страницу, на которую ссылается тег href, событие щелчка которого находится под вопросом.

Я могу вызвать функцию при нажатии на ссылку. Эта функция теперь проверяет указанное условие, выполняя другой URL-адрес (который выполняет мой контроллер Spring и возвращает ответ).

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

$('a[href*=/viewpage?number]').live('click', function(e) {
    e.preventDefault();
    redirectionURL = this.href;
    pageId= getUrlVars(redirectionURL)["number"];
    $.getJSON("redirect/" + pageId, {}, function(status) {
        if (status == null) {
            alert("Error in verifying the status.");
        } else if(!status) {
            $("#agreement").dialog("open");
        } else {
            window.open(redirectionURL);
        }
    });
});

Если я удалю e.preventDefault();из кода, блокировщик всплывающих окон не блокирует страницу, однако для условия 1 он затем открывает диалог, а также открывает страницу 'href'.

Если я решу одно, это создаст проблемы для другого. Я не могу одновременно оценить оба условия.

Не могли бы вы помочь мне решить эту проблему?

Как только это будет решено, мне нужно будет решить еще одну проблему, например, навигацию по событию ОК в диалоге :)

Блокировщики всплывающих окон обычно разрешают window.openиспользование только во время обработки пользовательского события (например, щелчка). В вашем случае вы звоните window.open позже , а не во время мероприятия, потому что $.getJSONэто асинхронно.

У вас есть два варианта:

1. Сделай что-нибудь другое, а не window.open.

2. Сделайте вызов ajax синхронным, чего обычно следует избегать, как чумы, поскольку он блокирует пользовательский интерфейс браузера. $.getJSONэквивалентно:

   $.ajax({
     url: url,
     dataType: 'json',
     data: data,
     success: callback
   });

   ... и поэтому вы можете сделать свой $.getJSONвызов синхронным, сопоставив свои параметры с указанными выше и добавив async: false:

   $.ajax({
       url:      "redirect/" + pageId,
       async:    false,
       dataType: "json",
       data:     {},
       success:  function(status) {
           if (status == null) {
               alert("Error in verifying the status.");
           } else if(!status) {
               $("#agreement").dialog("open");
           } else {
               window.open(redirectionURL);
           }
       }
   });

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

   Вот пример кода, который не проходит тест из-за асинхронного вызова:

   Живой пример | Живой источник (живые ссылки больше не работают из-за изменений в JSBin)

   jQuery(function($) {
     // This version doesn't work, because the window.open is
     // not during the event processing
     $("#theButton").click(function(e) {
       e.preventDefault();
       $.getJSON("http://jsbin.com/uriyip", function() {
         window.open("http://jsbin.com/ubiqev");
       });
     });
   });

   А вот пример, который действительно работает при использовании синхронного вызова:

   Живой пример | Живой источник (живые ссылки больше не работают из-за изменений в JSBin)

   jQuery(function($) {
     // This version does work, because the window.open is
     // during the event processing. But it uses a synchronous
     // ajax call, locking up the browser UI while the call is
     // in progress.
     $("#theButton").click(function(e) {
       e.preventDefault();
       $.ajax({
         url:      "http://jsbin.com/uriyip",
         async:    false,
         dataType: "json",
         success:  function() {
           window.open("http://jsbin.com/ubiqev");
         }
       });
     });
   });

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

Итак, вы можете попробовать такой сценарий:

1. var myWindow = window.open ('')
2. нарисуйте любое сообщение о загрузке в этом окне
3. когда запрос выполнен, просто вызовите myWindow.location = ' http://google.com '

У меня была эта проблема, и у меня не было готового URL-адреса, пока обратный вызов не вернет некоторые данные. Решением было открыть пустое окно перед запуском обратного вызова, а затем просто установить местоположение, когда обратный вызов вернется.

$scope.testCode = function () {
    var newWin = $window.open('', '_blank');
    service.testCode().then(function (data) {
        $scope.testing = true;
        newWin.location = '/Tests/' + data.url.replace(/["]/g, "");
    });
};

попробуйте это, это работает для меня,

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        success: function (data) {
            redirectWindow.location;
        }
    });
});

Это скрипка для этого http://jsfiddle.net/safeeronline/70kdacL4/1/

Windows должна быть создана в том же стеке (также известном как микрозадача ), что и событие, инициированное пользователем, например, обратный вызов щелчка, чтобы они не могли быть созданы позже асинхронно.

Однако вы можете создать окно без URL-адреса, а затем изменить URL-адрес этого окна, как только вы его узнаете , даже асинхронно!

window.onclick = () => {
  // You MUST create the window on the same event
  // tick/stack as the user-initiated event (e.g. click callback)
  const googleWindow = window.open();

  // Do your async work
  fakeAjax(response => {
    // Change the URL of the window you created once you
    // know what the full URL is!
    googleWindow.location.replace(`https://google.com?q=${response}`);
  });
};

function fakeAjax(callback) {
  setTimeout(() => {
    callback('example');
  }, 1000);
}

Современные браузеры открывают окно с пустой страницей (часто называемой about:blank), и если ваша асинхронная задача по получению URL-адреса выполняется довольно быстро, то в результате пользовательский интерфейс в целом удовлетворителен. Если вместо этого вы хотите отобразить сообщение о загрузке (или что-то еще) в окне, пока пользователь ожидает, вы можете использовать URI данных .

window.open('data:text/html,<h1>Loading...<%2Fh1>');

Этот код мне поможет. Надеюсь, это поможет некоторым людям

$('formSelector').submit( function( event ) {

    event.preventDefault();

    var newWindow = window.open('', '_blank', 'width=750,height=500');

    $.ajax({

        url: ajaxurl,
        type: "POST",
        data: { data },

    }).done( function( response ) {

        if ( ! response ) newWindow.close();
        else newWindow.location = '/url';

    });
});

Попробуйте использовать элемент ссылки и щелкните его с помощью javascriipt

<a id="SimulateOpenLink" href="#" target="_blank" rel="noopener noreferrer"></a>

и сценарий

function openURL(url) {
    document.getElementById("SimulateOpenLink").href = url
    document.getElementById("SimulateOpenLink").click()
}

Используйте это так

//do stuff
var id = 123123141;
openURL("/api/user/" + id + "/print") //this open webpage bypassing pop-up blocker
openURL("https://www.google.com") //Another link

Наблюдение за тем, что событие должно быть инициировано пользователем, помогло мне понять первую часть этого, но даже после этого Chrome и Firefox все еще блокировали новое окно. Вторая часть добавляла target = "_ blank" к ссылке, которая упоминалась в одном комментарии.

В итоге: вам нужно вызвать window.open из события, инициированного пользователем, в данном случае щелкнув ссылку, и эта ссылка должна иметь target = "_ blank".

В приведенном ниже примере ссылка использует class = "button-twitter".

$('.button-twitter').click(function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  var tweet_popup = window.open(href, 'tweet_popup', 'width=500,height=300');
});

var url = window.open("", "_blank");
url.location = "url";

это сработало для меня.

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

Когда вы выполняете асинхронный вызов по событию щелчка, просто сначала откройте пустое окно, а затем напишите URL-адрес в нем позже, когда асинхронный вызов завершится.

const popupWindow = window.open("", "_blank");
popupWindow.document.write("<div>Loading, Plesae wait...</div>")

при успешном выполнении асинхронного вызова напишите следующее

popupWindow.document.write(resonse.url)