window.open 没有使用 AJAX 和操纵 window.location 的弹出窗口阻止程序

2022-01-20 00:00:00 popup ajax twitter-oauth facebook-oauth window.open

从服务器(例如 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，但这会破坏用户体验，而且很烦人.您不能使用 IFRAMES，但它们是不允许的(因为您看不到地址栏).

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)，只需执行以下操作.假设我们有一个带有两个按钮的表单，Login with Twitter 和 Login with 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 代码

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 中的 POC http://jsfiddle.net/CNCgG/

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

这简单有效:)

相关文章