window.open sans bloqueur de fenêtres contextuelles utilisant AJAX et manipulation de window.location

Question

Lorsque vous traitez OAuth depuis le serveur, comme Twitter et Facebook, vous redirigerez probablement l'utilisateur vers une URL demandant l'autorisation de l'application. Habituellement, après avoir cliqué sur un lien, vous envoyez la demande au serveur, via AJAX, puis renvoyez l'URL d'autorisation.

Mais lorsque vous essayez d'utiliser window.open lorsque la réponse est reçue, votre navigateur bloque le popup, le rendant inutile. Bien sûr, vous pouvez simplement rediriger l'utilisateur vers la nouvelle URL, mais cela corrompt l'expérience de l'utilisateur, et c'est ennuyeux. Vous ne pouvez pas utiliser IFRAMES, mais ils ne sont pas autorisés (car vous ne pouvez pas voir la barre d'adresse).

Alors, comment le faire?

Answer 1

La réponse est assez simple, et fonctionne travers le navigateur sans aucun problème. Lorsque vous effectuez l'appel AJAX (j'utiliserai jQuery dans cet exemple), procédez comme suit. Supposons que nous ayons un formulaire avec deux boutons, Login with Twitter et Login with Facebook.

<button type="submit" class="login" value="facebook" name="type">Login with Facebook</button> 
<button type="submit" class="login" value="twitter" name="type">Login with Twitter</button> 

Ensuite, le code Javascript où la magie se produit

$(function() { 
    var 
     $login = $('.login'), 
     authWindow; 

    $login.on('click', function (e) { 
     e.preventDefault(); 
     /* We pre-open the popup in the submit, since it was generated from a "click" event, so no popup block happens */ 
     authWindow = window.open('about:blank', '', 'left=20,top=20,width=400,height=300,toolbar=0,resizable=1'); 
     /* do the AJAX call requesting for the authorize URL */ 

     $.ajax({ 
      url: '/echo/json/', 
      type: "POST", 
      data: {"json": JSON.stringify({"url": 'http://' + e.target.value + '.com'})} 
      /*Since it's a jsfiddle, the echo is only for demo purposes */ 
     }) 
     .done(function (data) { 
      /* This is where the magic happens, we simply redirec the popup to the new authorize URL that we received from the server */ 
      authWindow.location.replace(data.url); 
     }) 
     .always(function() { 
      /* You can poll if the window got closed here, and so a refresh on the main page, or another AJAX call for example */ 
     }); 
    }); 
}); 

Voici le CEP en jsFiddle http://jsfiddle.net/CNCgG/

est simple et efficace :)

Answer 2

Essayez d'ajouter async: false. Cela devrait fonctionner

$('#myButton').click(function() { 
$.ajax({ 
    type: 'POST', 
    async: false, 
    url: '/echo/json/', 
    data: {'json': JSON.stringify({ 
     url:'http://google.com'})}, 
    success: function(data) { 
     window.open(data.url,'_blank'); 
    } 
}); 
});