Contournement du bloqueur de fenêtres pop-up sur window.open lorsque JQuery event.preventDefault() est défini

Question

Je veux afficher un dialogue JQuery conditionnellement à l'événement de clic d'un hyperlien.

J'ai une exigence telle que, à la condition 1, ouvrir un dialogue JQuery et, si la condition 1 n'est pas satisfaite, naviguer vers la page référencée par la balise 'href' dont l'événement de clic est en question.

Je suis capable d'appeler une fonction sur l'événement de clic du lien. Cette fonction vérifie maintenant la dite condition en exécutant une autre URL (qui exécute mon contrôleur Spring et renvoie la réponse).

Tout fonctionne parfaitement, seule la fonction window.open étant bloquée par le bloqueur de pop-ups.

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

Si je retire e.preventDefault(); à partir du code, le bloqueur de popup ne bloque pas la page, mais pour la condition 1, il ouvre le dialogue ainsi que la page 'href'.

Si je résous l'un, cela crée un problème pour un autre. Je ne suis pas capable de rendre justice aux deux conditions simultanément.

Pouvez-vous m'aider à résoudre ce problème ?

Une fois ce problème résolu, j'ai un autre problème à résoudre, à savoir la navigation sur l'événement OK du dialogue :)

Answer 1

Ce code m'a aidé. J'espère que cela aidera certaines personnes

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

    });
});

Answer 2

L'observation que l'événement devait être initié par l'utilisateur m'a aidé à comprendre la première partie de ce problème, mais même après cela, Chrome et Firefox ont toujours bloqué la nouvelle fenêtre. La deuxième partie consistait à ajouter target="_blank" au lien, ce qui a été mentionné dans un commentaire.

En résumé, vous devez appeler window.open à partir d'un événement initié par l'utilisateur, dans ce cas en cliquant sur un lien, et ce lien doit avoir target="_blank".

Dans l'exemple ci-dessous, le lien utilise 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');
});

Answer 3

Essayez d'utiliser un un lien et cliquez dessus avec javascriipt

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

et le script

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

Utilisez-le comme ceci

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

Answer 4

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

cela a fonctionné pour moi.

Answer 5

J'utilise cette méthode pour éviter le bloqueur de popup dans mon code React. Cela fonctionnera aussi dans tous les autres codes javascript.

Lorsque vous effectuez un appel asynchrone sur un événement de clic, il suffit d'ouvrir d'abord une fenêtre vide et d'y écrire l'URL plus tard, lorsque l'appel asynchrone sera terminé.

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

en cas de succès de l'appel asynchrone, écrivez ce qui suit

popupWindow.document.write(resonse.url)