Open new tab without popup blocker after ajax call on user click

by

Update Oct 2014:

It was noted correctly in the comments, that Firefox has deprecated the synchronous setting in June 2014, but it is still working in this browser.

Furthermore, Chrome received updates which will only allow this to work as wanted if the ajax call returns in less than a second. Which is rather hard to gurantee. I’ve created another question devoted to the Chrome timeout:
Synchronous Ajax – does Chrome have a timeout on trusted events?

The linked post contains a JSFiddle demonstrating this concept and the problem.

Original Answer

Short answer: Make the ajax request synchronous.

Full answer:
A browser will only open a tab/popup without the popup blocker warning, if the command to open the tab/popup comes from a trusted event. That means: The user has to actively click somewhere to open a popup.

In your case, the user performs a click so you have the trusted event. You do loose that trusted context however, by performing the Ajax request. Your success handler does not have that event any more.
The only way to circumvent this is to perform a synchronous Ajax request which will block your browser while it runs, but will preserve the event context.

In jQuery this should do the trick:

$.ajax({
 url: 'http://yourserver/',
 data: 'your image',
 success: function(){window.open(someUrl);},
 async: false
});

More Related Contents:

  1. Avoid browser popup blockers
  2. How do I prevent Google Chrome from blocking my popup?
  3. Using JQuery to Access a New Window’s DOM
  4. chrome Pop-up blocker when to re-check after allowing page
  5. Date Format UTC in javascript [duplicate]
  6. typescript anonymous object with variable based label value
  7. How to find index of all occurrences of element in array?
  8. Change :hover CSS properties with JavaScript
  9. Day Name from Date in JS
  10. How can I bring a circle to the front with d3?
  11. React JS – Uncaught TypeError: this.props.data.map is not a function
  12. How are JavaScript arrays represented in physical memory?
  13. Microsecond timing in JavaScript
  14. ES6: Is it dangerous to delete elements from Set/Map during Set/Map iteration?
  15. Removing page title and date when printing web page (with CSS?)
  16. JavaScript: getting ImageData without canvas
  17. Dropdown using javascript onchange
  18. Firestore select where is not null
  19. JavaScript – Nuances of myArray.forEach vs for loop
  20. jQuery focus() sometimes not working in IE8
  21. Add CORS header to an http request using Ajax
  22. Upload Base64 Image Facebook Graph API
  23. How can I detect DOM ready and add a class without jQuery?
  24. How to prevent Axios from encoding my request parameters?
  25. Jquery execute onchange event on onload
  26. How can I differentiate between an arrow function, class and a normal function?
  27. How to sort numbers? [duplicate]
  28. Proper way to catch exception from JSON.parse
  29. How to add mixins to ES6 javascript classes?
  30. Phantom JS synchronous AJAX request : NETWORK_ERR: XMLHttpRequest Exception 101

Leave a Comment