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

Les bloqueurs de fenêtres publicitaires ne permettent généralement window.open si utilisé pendant le traitement d'un événement utilisateur (comme un clic). Dans votre cas, vous appelez window.open plus tard pas pendant l'événement, car $.getJSON est asynchrone.

Vous avez deux options :

1. Faites autre chose, plutôt que window.open .

2. Rendez l'appel ajax synchrone, ce que vous devriez normalement éviter comme la peste car cela bloque l'interface utilisateur du navigateur. $.getJSON est équivalent à :

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

   ...et ainsi vous pouvez faire votre $.getJSON l'appel synchrone en faisant correspondre vos paramètres à ce qui précède et en ajoutant 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);
           }
       }
   });

   Encore une fois, je ne préconise pas les appels ajax synchrones si vous pouvez trouver un autre moyen d'atteindre votre objectif. Mais si vous ne le pouvez pas, voilà.

   Voici un exemple de code qui échoue au test à cause de l'appel asynchrone :

   Exemple concret | Source en direct (Les liens en direct ne fonctionnent plus à cause des changements apportés à 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");
       });
     });
   });

   Et voici un exemple qui fonctionne, en utilisant un appel synchrone :

   Exemple concret | Source en direct (Les liens en direct ne fonctionnent plus à cause des changements apportés à 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");
         }
       });
     });
   });

Answer 2

Vous pouvez appeler window.open sans que le navigateur ne bloque uniquement si l'utilisateur effectue directement une action. Le navigateur envoie un drapeau et détermine que la fenêtre a été ouverte par l'action de l'utilisateur.

Vous pouvez donc essayer ce scénario :

1. var myWindow = window.open('')
2. afficher tout message de chargement dans cette fenêtre
3. lorsque la demande est effectuée, il suffit d'appeler myWindow.location = '. http://google.com '

Answer 3

J'ai eu ce problème et je n'avais pas mon url prête jusqu'à ce que le callback retourne des données. La solution était d'ouvrir une fenêtre vide avant de lancer le callback et ensuite de définir l'emplacement lorsque le callback revient.

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

Answer 4

Essayez ceci, ça marche pour moi,

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

Est-ce que fiddle sert à cela http://jsfiddle.net/safeeronline/70kdacL4/1/

Answer 5

Les fenêtres doivent être créées sur la même pile (alias micro-tâche ) comme l'événement initié par l'utilisateur, par exemple un callback de clic, afin qu'ils ne puissent pas être créés plus tard, de manière asynchrone.

Cependant, vous pouvez créer une fenêtre sans URL et vous pouvez alors changer l'URL de cette fenêtre une fois que vous le savez même de manière asynchrone !

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

Les navigateurs modernes ouvrent la fenêtre avec une page blanche (souvent appelée about:blank ), et en supposant que votre tâche asynchrone pour obtenir l'URL est assez rapide, l'UX qui en résulte est en général bien. Si vous souhaitez plutôt afficher un message de chargement (ou quoi que ce soit d'autre) dans la fenêtre pendant que l'utilisateur attend, vous pouvez utiliser l'option URI de données .

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