Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

window.open without popup blocker using AJAX and manipulating the window.location

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.

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).

So how to do it?

like image 368
pocesar Avatar asked May 03 '13 14:05

pocesar


People also ask

How to avoid browser pop-up blockers on window open angular?

The better way to altogether avoid pop-up blocking in browsers is to open a new window as a result of a user action, but fill it with content later when the ajax request completes. The following code shows how to correctly call window. open() to show a pop-up, which will not be blocked by the browser.

How do you bypass a pop-up blocker?

Click the Open menu button (three bars) in the upper-right corner. Click Options or Preferences. Select Privacy & Security on the left. Uncheck Block pop-up windows to disable the pop-up blocker.

How to open pop-up window in JavaScript?

The syntax to open a popup is: window. open(url, name, params) : url. An URL to load into the new window.

How do I disable or disable pop-up blocker programmatically?

The only way to get around popup blockers is for user activity to directly open the window. This will work most of the time, unless the user has his blocker set to refuse all popups. This application uses JavaScript for its functionality. Please close your browser, enable JavaScript, and re-load this page to continue.


2 Answers

Try adding async: false. It should be working

$('#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');
    }
});
});
like image 174
rajesh Avatar answered Oct 13 '22 11:10

rajesh


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>

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

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

This is simple and effective :)

like image 38
pocesar Avatar answered Oct 13 '22 09:10

pocesar