window.open bez blokowania okienek wyskakujących za pomocą AJAX i manipulowanie window.location

Question

Podczas obsługi OAuth z serwera, takiego jak Twitter i Facebook, najprawdopodobniej przekieruje użytkownika do adresu URL z prośbą o pozwolenie aplikacji. Zwykle po kliknięciu łącza wysyłane jest żądanie do serwera za pośrednictwem AJAX, a następnie zwracany jest adres URL autoryzacji.

Ale kiedy spróbujesz użyć window.open po odebraniu odpowiedzi, twoja przeglądarka blokuje wyskakujące okienko, co czyni go bezużytecznym. Oczywiście możesz po prostu przekierować użytkownika do nowego adresu URL, ale to psuje wrażenia użytkownika, a to jest denerwujące. Nie możesz używać IFRAMES, ale nie są one dozwolone (ponieważ nie widzisz paska lokalizacji).

Jak to zrobić?

Answer 1

Odpowiedź jest dość prosta i działa w przeglądarce bez żadnych problemów. Podczas wykonywania wywołania AJAX (będę używał jQuery w tym przykładzie), wykonaj następujące czynności. Załóżmy, że mamy formularz z dwoma przyciskami: Login with Twitter i 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> 

Następnie kod Javascript, gdzie dzieje się magia

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

Oto POC w JSFiddle http://jsfiddle.net/CNCgG/

Jest to prosty i skuteczny :)

Answer 2

spróbuj dodać async: false. Należy pracować

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