Pomijaj blokowanie wyskakujących okienek w oknie.open, gdy ustawiona jest funkcja JQuery event.preventDefault ()

Chcę wyświetlać okno dialogowe JQuery warunkowo po kliknięciu hiperłącza.

Mam wymaganie takie jak warunek1, aby otworzyć okno dialogowe JQuery, a jeśli warunek1 nie jest spełniony, przejdź do strony, do której odwołuje się tag „href”, którego zdarzenie kliknięcia dotyczy.

Jestem w stanie wywołać funkcję w przypadku kliknięcia linku. Ta funkcja sprawdza teraz wspomniany stan, wykonując inny adres URL (który wykonuje mój kontroler Spring i zwraca odpowiedź).

Wszystko działa idealnie, tylko window.open jest blokowane przez blokowanie wyskakujących okienek.

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

Jeśli e.preventDefault();usunę z kodu, bloker popoup nie blokuje strony, jednak dla warunku1 otwiera okno dialogowe, a także otwiera stronę „href”.

Jeśli rozwiążę jedno, stwarza to problem dla innego. Nie jestem w stanie oddać sprawiedliwości obu warunkom jednocześnie.

Czy możesz mi pomóc rozwiązać ten problem?

Kiedy to zostanie rozwiązane, mam inny problem do rozwiązania, np. Nawigację po zdarzeniu OK dialogu :)

Blokowanie wyskakujących okienek zazwyczaj zezwala tylko window.openwtedy, gdy jest używane podczas przetwarzania zdarzenia użytkownika (np. Kliknięcia). W twoim przypadku dzwonisz window.open później , a nie podczas zdarzenia, ponieważ $.getJSONjest asynchroniczny.

Masz dwie możliwości:

1. Zrób coś innego, zamiast window.open.

2. Spraw, aby wywołanie AJAX było synchroniczne, czego normalnie powinieneś unikać jak plagi, ponieważ blokuje to interfejs użytkownika przeglądarki. $.getJSONjest równa:

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

   ... więc możesz $.getJSONzsynchronizować połączenie, mapując parametry do powyższych i dodając 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);
           }
       }
   });

   Ponownie, nie zalecam synchronicznych wywołań Ajax, jeśli możesz znaleźć inny sposób osiągnięcia swojego celu. Ale jeśli nie możesz, proszę.

   Oto przykład kodu, który nie przeszedł testu z powodu wywołania asynchronicznego:

   Przykład na żywo | Źródło na żywo (linki na żywo nie działają z powodu zmian w 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");
       });
     });
   });

   A oto przykład, który działa, używając połączenia synchronicznego:

   Przykład na żywo | Źródło na żywo (linki na żywo nie działają z powodu zmian w 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");
         }
       });
     });
   });

możesz wywołać window.open bez blokowania przeglądarki tylko wtedy, gdy użytkownik wykona bezpośrednio jakąś akcję. Przeglądarka wysyła jakąś flagę i określa, że ​​okno zostało otwarte przez działanie użytkownika.

Możesz więc wypróbować ten scenariusz:

1. var myWindow = window.open ('')
2. narysuj dowolną wiadomość ładowania w tym oknie
3. gdy żądanie zostanie wykonane, zadzwoń pod numer myWindow.location = „ http://google.com ”

Miałem ten problem i nie miałem gotowego adresu URL, dopóki oddzwonienie nie zwróci niektórych danych. Rozwiązaniem było otwarcie pustego okna przed uruchomieniem wywołania zwrotnego, a następnie po prostu ustawienie lokalizacji, w której wywołanie zwrotne powróci.

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

spróbuj tego, to działa dla mnie,

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

Jest skrzypkiem dla tego http://jsfiddle.net/safeeronline/70kdacL4/1/

Okna muszą być tworzone na tym samym stosie (czyli mikrozadaniu ), co zdarzenie inicjowane przez użytkownika, np . Wywołanie zwrotne kliknięcia - aby nie można było ich później utworzyć asynchronicznie.

Możesz jednak utworzyć okno bez adresu URL, a następnie zmienić adres URL tego okna, gdy już je znasz , nawet asynchronicznie!

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

Nowoczesne przeglądarki otworzą okno z pustą stroną (często nazywaną about:blank), a zakładając, że zadanie asynchroniczne w celu uzyskania adresu URL jest dość szybkie, wynikowy UX jest w większości w porządku. Jeśli zamiast tego chcesz wyświetlić komunikat ładowania (lub cokolwiek) w oknie, podczas gdy użytkownik czeka, możesz użyć identyfikatorów URI danych .

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

Ten kod mi pomoże. Mam nadzieję, że to pomoże niektórym ludziom

$('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';

    });
});

Spróbuj użyć elementu odsyłacza i kliknij go za pomocą javascriipt

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

i scenariusz

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

Użyj tego w ten sposób

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

Spostrzeżenie, że zdarzenie musiało zostać zainicjowane przez użytkownika, pomogło mi zrozumieć pierwszą część tego, ale nawet po tym Chrome i Firefox nadal blokowały nowe okno. Druga część polegała na dodaniu target = "_ blank" do linku, o którym była mowa w jednym komentarzu.

Podsumowując: musisz zadzwonić do window.open ze zdarzenia zainicjowanego przez użytkownika, w tym przypadku klikając na link, i ten link musi mieć target = "_ blank".

W poniższym przykładzie link używa 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";

to działało dla mnie.

Używam tej metody, aby uniknąć blokowania wyskakujących okienek w moim kodzie React. będzie działać również we wszystkich innych kodach javascript.

Gdy wykonujesz wywołanie asynchroniczne w przypadku zdarzenia kliknięcia, po prostu otwórz najpierw puste okno, a następnie wpisz w nim adres URL później, gdy wywołanie asynchroniczne zostanie zakończone.

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

w przypadku powodzenia wywołania asynchronicznego napisz co następuje

popupWindow.document.write(resonse.url)