Browser(browser name) prevented this site(facebook) from opening a pop-up window

Question

I am trying to post some data on facebook after getting a response from the server side.

Example :

function share_to_facebook(url){

    $.ajax({
    type: "POST",
    url: "/create_data",
    data: data,
    success: function(result) {
      if(result.success=="success"){
        // url contains the facebook url with some required parameters.
        window.open(url, '_blank');
     }
    }
  });
}

After executing this method, Getting following message- "Browser(browser name) prevented this site from opening a pop-up window"

How to open facebook page without getting this errors?

Answer 1

Popup blockers in modern browsers in default settings only let popups go through if they were opened directly on user interaction (most often a click.)

But inside the callback function of an async AJAX call, that “direct” connection is lost. The browser sees no connection to the previous user interaction any more, therefor thinks it is an “automated” popup the user did not ask for - and so it gets blocked.

You could try and open the popup window before your AJAX request, with an empty page/ about:blank as URL (assuming share_to_facebook gets called directly on user interaction), and then in your callback you just assign a new URL to the popup window.

function share_to_facebook(url){
    var myPopup = window.open('about:blank', '_blank');

    $.ajax({
    // ...
    success: function(result) {
      if(result.success=="success"){
        // url contains the facebook url with some required parameters.
        myPopup.location.href = url;
     }
    }
  });
}