window.open popup getting blocked during click event

Question

What I ultimately need to do is run an $.ajax() call and then after that is run, open a new window.

A use clicks on a "Preview" button that saves their current form then opens a new window that shows a preview of the item with the data that was just saved.

But as-is, the window.open function gets blocked by popup blockers.

Here's the basic parts of my code:

HTML:

<a href="/surveys/185/preview" class="preview" target="_blank">Preview</a>

JavaScript:

$('.preview').live('click', function(event){
  save_survey($(this).attr('href'));
  event.preventDefault();
});

function save_survey(url) {
  $.ajax({
    type: "POST",
    url: form_url,
    dataType: 'json',
    data: form_data,
    success: function(data) {
      window.open(url, '_blank');
    }
  });
}

Homeopathy

Answer 1

I ran into this problem recently and found this work-around:

1) call window.open just before calling $.ajax and save window reference:

var newWindow = window.open(...);

2) on callback set location property of the saved window reference:

newWindow.location = url;

Maybe it will help you too.

Touching

This is incredibly clever. And I thought there was no hope. – Antofagasta

Actually this doesn't seem to work anymore. Can someone confirm that this isn't possible? – Antofagasta

@IgorDymov This seems to work with major browser. Could you elaborate why this works. – Bugloss

For those who find that this isn't working, I noticed that window.open can return null if not triggered by a user-initiated event: https://mcmap.net/q/470339/-window-open-returns-null-and-fails-in-inline-script-but-works-from-console. – Mcclendon

What if I don’t have the url before Ajax response? – Mulct

Answer 2

Popup blockers usually works blocking every popup shown not triggered by a direct user action, like clicking on a button or a link.

If you use a ajax request on your click event, the request is fired asyncronous from the click event, that's why by the time the ajax request has done its job and you get your event with the response from the request you have lost your chance to trigger a window.open withouth the popup blocker getting in the way, the original click event it's long dead by that time.

Uzzial

Answer 3

According this this post, it looks like you would have to open your window in direct response to the click (to avoid getting hit by the popup blockers) rather than waiting until the AJAX call completes to open the new window.

Bulletin

Answer 4

I solved my case by making the Ajax call synchronous. E.g. (with jQuery):

$("form").submit(function(e){
    e.preventDefault();
    $.ajax({
      async: false,
      url: ...,
      data: ...,
      success: function(results){
          if(results.valid){
              window.open(...);
          }
      }
    });
    return false;
  });

Malign

Answer 5

const newWin = window.open(`${BASE_URL}`, 'expampleName')
if (newWin) {
  newWin.onload = () => {
    const currentOpenWindow = newWin
    const href = newWin.location.href
  }
}

Vidar

could you explain, how this answers the question? – Factoring

It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code. – Fluoresce