JQuery event.preventDefault () ayarlandığında window.open üzerinde pop-up engelleyiciyi atla

Bir köprünün tıklama olayında koşullu olarak bir JQuery iletişim kutusu göstermek istiyorum.

Koşul1'de bir JQuery diyaloğu açın gibi bir gereksinimim var ve koşul1 karşılanmazsa, tıklama etkinliği söz konusu olan 'href' etiketinin referans aldığı sayfaya gidin.

Bağlantının tıklama olayında bir işlevi çağırabiliyorum. Bu işlev şimdi başka bir URL'yi çalıştırarak (Spring denetleyicimi çalıştıran ve yanıtı döndüren) söz konusu koşulu kontrol eder.

Tümü yalnızca window.open, popup engelleyici tarafından engellenerek mükemmel çalışır.

$('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();Koddan kaldırırsam , popoup engelleyici sayfayı engellemez, ancak koşul1 için daha sonra diyaloğu ve 'href' sayfasını açar.

Birini çözersem, diğeri için sorun yaratır. Her iki duruma aynı anda adalet veremiyorum.

Lütfen bu sorunu çözmeme yardım eder misiniz?

Bu çözüldükten sonra çözmem gereken başka bir sorun var, yani diyaloğun OK olayında gezinme :)

Pop-up engelleyicileri, genellikle yalnızca bir kullanıcı etkinliğinin işlenmesi sırasında (tıklama gibi) window.openkullanılırsa izin verir . Sizin durumunuzda, etkinlik sırasında değil, daha sonra arayacaksınız çünküwindow.open $.getJSON ararsınız asenkron değildir.

İki seçeneğiniz var:

1. Bunun yerine başka bir şey yapın window.open.

2. Ajax çağrısını eşzamanlı yapın, bu normalde tarayıcının kullanıcı arayüzünü kilitlediği için veba gibi kaçınmanız gereken bir şeydir. $.getJSONeşdeğerdir:

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

   ... ve böylece $.getJSONparametrelerinizi yukarıdakilerle eşleştirip şunu ekleyerek aramanızı eşzamanlı yapabilirsiniz 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);
           }
       }
   });

   Yine, hedefinize ulaşmanın başka bir yolunu bulabilirseniz, eşzamanlı ajax çağrılarını savunmuyorum. Ama yapamazsan, oraya gidersin.

   Eşzamansız çağrı nedeniyle testi geçemeyen bir kod örneğini burada bulabilirsiniz:

   Canlı örnek | Canlı kaynak (Canlı bağlantılar artık JSBin'deki değişiklikler nedeniyle çalışmamaktadır)

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

   Ve işte eşzamanlı arama kullanarak işe yarayan bir örnek:

   Canlı örnek | Canlı kaynak (Canlı bağlantılar artık JSBin'deki değişiklikler nedeniyle çalışmamaktadır)

   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'i tarayıcı engellemesi olmadan yalnızca kullanıcı doğrudan bir eylem yaparsa çağırabilirsiniz. Tarayıcı bazı işaretler gönderir ve bu pencerenin kullanıcı eylemiyle açıldığını belirler.

Yani, bu senaryoyu deneyebilirsiniz:

1. var myWindow = window.open ('')
2. bu pencerede herhangi bir yükleme mesajı çizin
3. istek yapıldığında, myWindow.location = ' http://google.com ' çağrısı yapmanız yeterlidir

Bu sorunu yaşadım ve geri arama bazı veriler döndürene kadar url'im hazır değildi. Çözüm, geri aramayı başlatmadan önce boş bir pencere açmak ve ardından geri arama döndüğünde konumu belirlemekti.

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

bunu dene, benim için çalışıyor

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

Bu http://jsfiddle.net/safeeronline/70kdacL4/1/ için keman mı?

Windows , kullanıcı tarafından başlatılan olay ile aynı yığın üzerinde (diğer adıyla mikro görev ) oluşturulmalıdır , örneğin tıklama geri araması - böylece daha sonra eşzamansız olarak oluşturulamazlar.

Bununla birlikte, URL'siz bir pencere oluşturabilir ve daha sonra , eşzamansız olsa bile, bu pencerenin URL'sini öğrendikten sonra değiştirebilirsiniz !

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

Modern tarayıcılar pencereyi boş bir sayfayla açar (genellikle denir about:blank) ve URL'yi almak için eşzamansız görevinizin oldukça hızlı olduğunu varsayarsak, ortaya çıkan UX çoğunlukla iyidir. Bunun yerine, kullanıcı beklerken pencereye bir yükleme mesajı (veya herhangi bir şey) oluşturmak istiyorsanız, Veri URI'larını kullanabilirsiniz .

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

Bu kod bana yardımcı oluyor. Umarım bu bazı insanlara yardımcı olur

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

    });
});

Bir bağlantı öğesi kullanmayı deneyin ve javascriipt ile tıklayın

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

ve senaryo

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

Bunu böyle kullan

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

Olayın kullanıcı tarafından başlatılması gerektiği gözlemi, bunun ilk bölümünü anlamama yardımcı oldu, ancak bundan sonra bile Chrome ve Firefox yeni pencereyi engelledi. İkinci kısım, bir yorumda bahsedilen bağlantıya target = "_ blank" ekliyordu.

Özetle: kullanıcı tarafından başlatılan bir olaydan window.open'ı çağırmanız gerekir, bu durumda bir bağlantıya tıklarsınız ve bu bağlantının target = "_ blank" olması gerekir.

Aşağıdaki örnekte bağlantı class = "button-twitter" kullanıyor.

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

bu benim için çalıştı.

React kodumdaki açılır pencere engelleyiciden kaçınmak için bu yöntemi kullanıyorum. diğer tüm javascript kodlarında da çalışacaktır.

Tıklama olayında eşzamansız bir çağrı yaptığınızda, önce boş bir pencere açın ve daha sonra eşzamansız bir çağrı tamamlandığında URL'yi buraya yazın.

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

eşzamansız çağrının başarısı üzerine aşağıdakileri yazın

popupWindow.document.write(resonse.url)