Pop up blocker API- how to check if user has it enabled

Question

I need to know when the user clicks on the button that triggers window.open if there is stable API/way to know beforehand if the user actively has a pop-up blocker?

In some cases the user doesn't know/pay attention that they have pop-up blocker (that block the new window). I would like to inform them by some dialog/or something to authorize a new window by clicking on allow.

Answer 1

Window.open(...) returns a handle to the new window if it exists. If it doesn't have a handle to the new window, that's a pretty good indication the window was blocked.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

From: https://davidwalsh.name/popup-block-javascript

var windowName = 'userConsole'; 
var popUp = window.open('/popup-page.php', windowName, 'width=1000, height=700, left=24, top=24, scrollbars, resizable');
if (popUp == null || typeof(popUp)=='undefined') {  
    alert('Please disable your pop-up blocker and click the "Open" link again.'); 
} 
else {  
    popUp.focus();
}

Answer 2

Well this is your question - I need some stable solution how to know when the user click on event which open window ,how to know if he have the pop-up blocker enabled . before the window is open...thanks!

I am afraid there isn't any method to handle that. I researched upon this same issue a while back and I am sharing what I found.

Why our popups are blocked?

Smart popup blockers will allow a popup if it is directly associated to a user’s action. If it’s delayed in anyway, there’s a good chance it’s going to get blocked.

Reference : Andy Stratton (His Blog)

I like this explanation more

The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.

Reference : dthorpe (Stack Overflow Username)

What we can do?

One thing is crystal clear as of now that there isn't any direct way to tweak with pop up blockers from code. I think the reason behind it is, it'll hamper the only reason behind it's existence.

You can go read at the solution presented by Andy on his blog here : Click. If I had to write what he has explained in short I'd directly say that use popups for response section. Andy explains that we can use windows.open in response section after a call is directly made on user's action wont be blocked by popup blockers.

Like xaxxon has explained it is possible to check after execution of windows.open that if it was blocked or not. Generally that is what people do and developers while making any extra service feature keep that in mind. For example I was implementing twitter's digits authentication system. I used to check for message after failure in execution of pop up command and then I could show a message to user to enable pop up window but then I found the solution mentioned above. It makes the whole thing more neat and clean.

Answer 3

window.open() will mostly only be blocked if it was not triggered by a click event.

To confirm the window has loaded:

var loaded = false;

function windowLoaded() { 
  alert("The popup loaded"); 
  loaded = true
}

function pause(milliseconds) {
  var dt = new Date();
  while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

document.write("start...");

//open the window
var win = window.open("window.html");

// If window.open returned an object
if(win) {
  win.onload = function() { 
    win.RunCallbackFunction = windowLoaded; 
  };
  document.write("popup sent...");

  pause(3000);

  // Verify that out window loaded
  if (loaded == false)
    document.write("check you popup blocker!");
  else
    document.write("ok!");

}
else {
  document.write("window.open() was blocked...");
}

Answer 4

Use this code to check

var popupBlockerChecker = {check:function(b) {
var a = this;
b ? /chrome/.test(navigator.userAgent.toLowerCase()) ? setTimeout(function()      {
a._is_popup_blocked(a, b);
}, 200) : b.onload = function() {
a._is_popup_blocked(a, b);
} : a._displayError();
}, _is_popup_blocked:function(b, a) {
0 == 0 < a.innerHeight && b._displayError();
}, _displayError:function() {
alert("Popup Blocker is enabled! Please add this site to your exception list.");
}};

and the usage will be something like

 var popup = window.open("http://www.google.com.au", '_blank');
 popupBlockerChecker.check(popup);

Answer 5

The following is a jQuery solution to popup blocker checking. It has been tested in FF (v11), Safari (v6), Chrome (v23.0.127.95) & IE (v7 & v9).

var popupBlockerChecker = {
    check: function(popup_window){
        var _scope = this;
        if (popup_window) {
            if(/chrome/.test(navigator.userAgent.toLowerCase())){
                setTimeout(function () {
                    _scope._is_popup_blocked(_scope, popup_window);
                 },200);
            }else{
                popup_window.onload = function () {
                    _scope._is_popup_blocked(_scope, popup_window);
                };
            }
        }else{
            _scope._displayError();
        }
    },
    _is_popup_blocked: function(scope, popup_window){
        if ((popup_window.innerHeight > 0)==false){ scope._displayError(); }
    },
    _displayError: function(){
        alert("Popup Blocker is enabled! Please add this site to your exception list.");
    }
};

Usage:-

var popup = window.open("http://www.google.co.in", '_blank');
popupBlockerChecker.check(popup);

Hope it will help.