的window.open没有弹出式窗口拦截使用AJAX和操纵了window.location [英] window.open without popup blocker using AJAX and manipulating the window.location

问题描述

在从服务器，如Twitter和Facebook的OAuth打交道时，你最有可能将用户重定向到一个URL请求的应用程序的权限。通常情况下，点击一个链接后，你发送请求到服务器，通过AJAX，然后返回授权的URL。

When dealing with OAuth from the server, such as Twitter and Facebook, you most likely will redirect the user to an URL asking for app permission. Usually, after clicking a link, you send the request to the server, via AJAX, and then return the authorization URL.

但是，当您尝试使用的window.open 接收到答案的时候，您的浏览器拦截弹出窗口，使其失去作用。当然，你可以将用户重定向到新的URL，但破坏了用户体验，再加上它很烦人。你不能使用iframe，但他们不能（因为你不能看到地址栏）。

But when you try to use window.open when the answer is received, your browser blocks the popup, making it useless. Of course, you can just redirect the user to the new URL, but that corrupts the user experience, plus it's annoying. You can't use IFRAMES, but they are not allowed (because you can't see the location bar).

那么怎么办呢？

推荐答案

答案很简单，工程跨浏览器没有任何问题。在做AJAX调用（我会在这个例子中使用jQuery），只需做到以下几点。假设我们有两个按钮的形式，登录与Twitter 和登录与Facebook 。

The answer is quite simple, and works cross browser without any issues. When doing the AJAX call (I'll be using jQuery in this example), just do the following. Suppose we have a form with two buttons, Login with Twitter and 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>

然后Javascript的code其中，奇迹发生了。

Then the Javascript code where the magic happens

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

下面是的jsfiddle http://jsfiddle.net/CNCgG/

Here is the POC in JSFiddle http://jsfiddle.net/CNCgG/

这是简单而有效的：）

这篇关于的window.open没有弹出式窗口拦截使用AJAX和操纵了window.location的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！