How do I create an indeterminately delayed popup (for Social Auth) with window.open without a popup blocker stopping it

Question

The experience I want is:

1. User clicks "Sign Up"
2. Some asynchronous server stuff happens (checks & validations. Whatever)
3. Upon completion of the required asynchronous server stuff the Facebook / Twitter / whatever auth dialogs pop up.

Couple of things that make this hard:

1. The social popup widgets must be in a popup. They cannot be inside of an iframe.
2. Popup blockers will block any window.open code that's not in the immediate function of a click handler
3. window.open Code from a standard ajax callback handler will be blocked by popup blockers.
4. A synchronous ajax request is being deprecated in jQuery 1.8

Any ideas?

Answer 1

This is a common and long-lamented problem. Though jQuery may be deprecating synchronous AJAX, you could always use a non-jQuery AJAX request. Another possibility would be a refactor where the following takes place:

1. User clicks "Sign Up"
2. Script calls window.open to a local URI
3. Popup appears and runs the "checks & validations" while loading
4. If there is a validation error, popup sends error to parent and closes itself
5. If not, local page in popup redirects to FB/Twitter OAuth flow

If that's possible, I suggest that. If not, async: false (or writing your own very simple cross-browser XHR wrapper) is still the best way.