Detect blocked popup in Chrome
Asked Answered
G

16

106

I am aware of javascript techniques to detect whether a popup is blocked in other browsers (as described in the answer to this question). Here's the basic test:

var newWin = window.open(url);

if(!newWin || newWin.closed || typeof newWin.closed=='undefined')
{
    //POPUP BLOCKED
}

But this does not work in Chrome. The "POPUP BLOCKED" section is never reached when the popup is blocked.

Of course, the test is working to an extent since Chrome doesn't actually block the popup, but opens it in a tiny minimized window at the lower right corner which lists "blocked" popups.

What I would like to do is be able to tell if the popup was blocked by Chrome's popup blocker. I try to avoid browser sniffing in favor of feature detection. Is there a way to do this without browser sniffing?

Edit: I have now tried making use of newWin.outerHeight, newWin.left, and other similar properties to accomplish this. Google Chrome returns all position and height values as 0 when the popup is blocked.

Unfortunately, it also returns the same values even if the popup is actually opened for an unknown amount of time. After some magical period (a couple of seconds in my testing), the location and size information is returned as the correct values. In other words, I'm still no closer to figuring this out. Any help would be appreciated.

Grisons answered 20/3, 2009 at 22:53 Comment(7)
Yoav, the location shows the same regardless of whether the pop up is blocked or not. Anyone else have an answer that doesn't involve making the user wait 3.5 seconds?Feeney
Latest solutions from InvisibleBacon and Andy don't work in Chrome 10: "failed for chrome" message appears even if test pop-up was successfully displayed. Any idea?Henke
I think that a new question would be in order as some of these solutions appear to have only worked with the early versions of Chrome.Arlina
@George Bailey I agree, but just to be clear, some of them do work in the current version of Chrome (19). Andrew's original idea of using outerHeight (or screenX, as others have suggested) is working fine for me, combined with the setTimeout approach. But, yes, trying to make sense of all of these answers was really confusing until I did my own testing.Pasteurization
Try this: https://mcmap.net/q/131151/-detect-blocked-popups-without-opening-a-popupDd
This does work on Chrome as of Jan. 26, 2017.Whorled
Does this answer your question? How can I detect if a browser is blocking a popup?Durra
G
69

Well the "magical time" you speak of is probably when the popup's DOM has been loaded. Or else it might be when everything (images, outboard CSS, etc.) has been loaded. You could test this easily by adding a very large graphic to the popup (clear your cache first!). If you were using a Javascript Framework like jQuery (or something similar), you could use the ready() event (or something similar) to wait for the DOM to load before checking the window offset. The danger in this is that Safari detection works in a conflicting way: the popup's DOM will never be ready() in Safari because it'll give you a valid handle for the window you're trying to open -- whether it actually opens or not. (in fact, i believe your popup test code above won't work for safari.)

I think the best thing you can do is wrap your test in a setTimeout() and give the popup 3-5 seconds to complete loading before running the test. It's not perfect, but it should work at least 95% of the time.

Here's the code I use for cross-browser detection, without the Chrome part.

function _hasPopupBlocker(poppedWindow) {
    var result = false;

    try {
        if (typeof poppedWindow == 'undefined') {
            // Safari with popup blocker... leaves the popup window handle undefined
            result = true;
        }
        else if (poppedWindow && poppedWindow.closed) {
            // This happens if the user opens and closes the client window...
            // Confusing because the handle is still available, but it's in a "closed" state.
            // We're not saying that the window is not being blocked, we're just saying
            // that the window has been closed before the test could be run.
            result = false;
        }
        else if (poppedWindow && poppedWindow.test) {
            // This is the actual test. The client window should be fine.
            result = false;
        }
        else {
            // Else we'll assume the window is not OK
            result = true;
        }

    } catch (err) {
        //if (console) {
        //    console.warn("Could not access popup window", err);
        //}
    }

    return result;
}

What I do is run this test from the parent and wrap it in a setTimeout(), giving the child window 3-5 seconds to load. In the child window, you need to add a test function:

function test() {}

The popup blocker detector tests to see whether the "test" function exists as a member of the child window.

ADDED JUNE 15 2015:

I think the modern way to handle this would be to use window.postMessage() to have the child notify the parent that the window has been loaded. The approach is similar (child tells parent it's loaded), but the means of communication has improved. I was able to do this cross-domain from the child:

$(window).load(function() {
  this.opener.postMessage({'loaded': true}, "*");
  this.close();
});

The parent listens for this message using:

$(window).on('message', function(event) {     
  alert(event.originalEvent.data.loaded)
}); 

Hope this helps.

Goliard answered 7/7, 2009 at 0:12 Comment(9)
Rich, you are a javascript popup guru. Thank you. That's exactly what I needed.Grisons
Any updates on this? Doesn't seem to work anymore... Specifically in ChromeFarad
I think I found a way to make this work for new versions of Chrome. See my answer for details.Mango
where is your answer Mr Invisible Bacon?Deafen
Do you have a solution where you have 'included' the chrome part?Deafen
If anyone is wondering, it does work for chrome. You call this function in a setTimeout after you open the window. From what I've seen Chrome only needs ~100ms delay or so for the popup to be fully loaded (i.e. all the queued operations completed). This also seems to be a generally good method to use for all browsers, as it requires the popped up window to confirm it exists (usually by checking the window boundaries), the only issue is in finding a good delay. Firefox seems to be godly slow...Glarum
Basically there's a bug in Chrome. Although it hides the popup, it still executes and you still get the window object back - so regular checks don't work. Here's the solution that worked for me: var popup = window.open(url); if (popup) { popup.onload = function () { console.log(popup.innerHeight > 0 ? 'open' : 'blocked'); } } else { console.log('blocked'); } Working example here: jsbin.com/uticev/3Allpowerful
This answer is no longer correct, please change it to @Predrag Stojadinović 's answerPleura
I guess the proper way to handle this now would be to use window.postMessage() to have the child notify the parent that the window has been loaded. I was able to do this cross-domain from the child: $(window).load(function() { this.opener.postMessage({'loaded': true}, "*"); this.close(); }); The parent listens for this message using: $(window).on('message', function(event) { alert(event.originalEvent.data.loaded) });Goliard
C
16

Just one improvement to InvisibleBacon's snipet (tested in IE9, Safari 5, Chrome 9 and FF 3.6):

var myPopup = window.open("popupcheck.htm", "", "directories=no,height=150,width=150,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,top=0,location=no");
if (!myPopup)
    alert("failed for most browsers");
else {
    myPopup.onload = function() {
        setTimeout(function() {
            if (myPopup.screenX === 0) {
                alert("failed for chrome");
            } else {
                // close the test window if popups are allowed.
                myPopup.close();  
            }
        }, 0);
    };
}
Christianly answered 25/2, 2011 at 11:29 Comment(2)
Why close the window if popups are allowed? wouldn't that be closing the popup that you wanted to open in the first place?Inhabitant
Using jQuery, instead of onload, I would do $(myPopup).ready(). Running locally my IE was too fast, and "onload" had already occurred.Issacissachar
U
12

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). Update the _displayError function to handle the error message as you see fit.

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.ca", '_blank');
popupBlockerChecker.check(popup);

Hope this helps! :)

Undesigned answered 30/11, 2012 at 20:35 Comment(4)
Your welcome Suvendu, I'm glad you found it useful! Happy coding! :)Undesigned
I tweaked this code to pass in/around the url that's attempting to be opened. This allows the _displayError() method to display an alert (I'm using toastr) notifying the user that there is a problem and provide a clickable link that will circumvent most blockers since it is a direct link. Thanks for sharing!!Cyndie
@TylerForsythe do you have any more info about your solution? Would love to be able to provide a directly clickable link to the content.Coraleecoralie
@JoshuaDance Here is a gist I just created to demonstrate my modified code and how I invoke it. Hope it helps! gist.github.com/tylerforsythe/452ceaad62f507d7cb7bd7ddbffe650cCyndie
M
10

Rich's answer isn't going to work anymore for Chrome. Looks like Chrome actually executes any Javascript in the popup window now. I ended up checking for a screenX value of 0 to check for blocked popups. I also think I found a way to guarantee that this property is final before checking. This only works for popups on your domain, but you can add an onload handler like this:

var myPopup = window.open("site-on-my-domain", "screenX=100");
if (!myPopup)
    alert("failed for most browsers");
else {
    myPopup.onload = function() {
        setTimeout(function() {
            if (myPopup.screenX === 0)
                alert("failed for chrome");
        }, 0);
    };
}

As many have reported, the "screenX" property sometimes reports non-zero for failed popups, even after onload. I experienced this behavior as well, but if you add the check after a zero ms timeout, the screenX property always seems to output a consistent value.

Let me know if there are ways to make this script more robust. Seems to work for my purposes though.

Mango answered 8/11, 2010 at 16:48 Comment(1)
It doesn't for me, onload never fires.Returnee
B
9

This worked for me:

    cope.PopupTest.params = 'height=1,width=1,left=-100,top=-100,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=no,directories=no,status=no';
    cope.PopupTest.testWindow = window.open("popupTest.htm", "popupTest", cope.PopupTest.params);

    if( !cope.PopupTest.testWindow
        || cope.PopupTest.testWindow.closed
        || (typeof cope.PopupTest.testWindow.closed=='undefined')
        || cope.PopupTest.testWindow.outerHeight == 0
        || cope.PopupTest.testWindow.outerWidth == 0
        ) {
        // pop-ups ARE blocked
        document.location.href = 'popupsBlocked.htm';
    }
    else {
        // pop-ups are NOT blocked
        cope.PopupTest.testWindow.close();
    }

The outerHeight and outerWidth are for chrome because the 'about:blank' trick from above doesn't work in chrome anymore.

Burbot answered 5/6, 2012 at 23:18 Comment(2)
Good catch on the chrome changes and thanks for updating it here. Your answer should be marked as correct.Pleura
The outerWidth and outerHeight does not work in Chrome anymore eitherVerdie
A
5

I'm going to just copy/paste the answer provided here: https://mcmap.net/q/128577/-how-can-i-detect-if-a-browser-is-blocking-a-popup by DanielB . works on chrome 40 and it's very clean. no dirty hacks or waiting involves.

function popup(urlToOpen) {
  var popup_window=window.open(urlToOpen,"myWindow","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, width=400, height=400");            
  try {
    popup_window.focus();   
  }
  catch (e) {
    alert("Pop-up Blocker is enabled! Please add this site to your exception list.");
  }
}
Accentuation answered 7/2, 2015 at 5:27 Comment(0)
T
4

How about a Promise approach ?

const openPopUp = (...args) => new Promise(s => {
  const win = window.open(...args)
  if (!win || win.closed) return s()
  setTimeout(() => (win.innerHeight > 0 && !win.closed) ? s(win) : s(), 200)
})

And you can use it like the classic window.open

const win = await openPopUp('popuptest.htm', 'popuptest')
if (!win) {
  // popup closed or blocked, handle alternative case
}

You could change the code so that it fail the promise instead of returning undefined, I just thought that if was an easier control flow than try / catch for this case.

Tatianna answered 1/10, 2018 at 6:58 Comment(1)
This works for detecting chrome extension adblockers. +1Awn
T
2

Check the position of the window relative to the parent. Chrome makes the window appear almost off-screen.

Tawnyatawsha answered 20/3, 2009 at 23:1 Comment(3)
I'll try that and let you know my results. Thanks.Grisons
Google Chrome reports the left and top offsets as 0 when the popup is "blocked". I thought this was my golden ticket, but no. It reports the offsets as 0 immediately after actually opening as well. At some magical point in the future after opening, the top and left offsets are reported correctly.Grisons
Check my post for a way that seems to guarantee that the offsets are set before checking.Mango
A
2

I had a similar problem with popups not opening in Chrome. I was frustrated because I wasn't trying to do something sneaky, like an onload popup, just opening a window when the user clicked. I was DOUBLY frustrated because running my function which included the window.open() from the firebug command line worked, while actually clicking on my link didn't! Here was my solution:

Wrong way: running window.open() from an event listener (in my case, dojo.connect to the onclick event method of a DOM node).

dojo.connect(myNode, "onclick", function() {
    window.open();
}

Right way: assigning a function to the onclick property of the node that called window.open().

myNode.onclick = function() {
    window.open();
}

And, of course, I can still do event listeners for that same onclick event if I need to. With this change, I could open my windows even though Chrome was set to "Do not allow any site to show pop-ups". Joy.

If anyone wise in the ways of Chrome can tell the rest of us why it makes a difference, I'd love to hear it, although I suspect it's just an attempt to shut the door on malicious programmatic popups.

Antlion answered 7/7, 2010 at 3:52 Comment(1)
Thanks for sharing your solution. It works. This is the best and most clean way to open pop-ups in chrome. Your answer should be on top. Rest of solutions are just "dirty" hacks.Riess
T
2

Here's a version that is currently working in Chrome. Just a small alteration away from Rich's solution, though I added in a wrapper that handles the timing too.

function checkPopupBlocked(poppedWindow) {
 setTimeout(function(){doCheckPopupBlocked(poppedWindow);}, 5000);
}

function doCheckPopupBlocked(poppedWindow) {

    var result = false;

    try {
        if (typeof poppedWindow == 'undefined') {
            // Safari with popup blocker... leaves the popup window handle undefined
            result = true;
        }
        else if (poppedWindow && poppedWindow.closed) {
            // This happens if the user opens and closes the client window...
            // Confusing because the handle is still available, but it's in a "closed" state.
            // We're not saying that the window is not being blocked, we're just saying
            // that the window has been closed before the test could be run.
            result = false;
        }
        else if (poppedWindow && poppedWindow.outerWidth == 0) {
            // This is usually Chrome's doing. The outerWidth (and most other size/location info)
         // will be left at 0, EVEN THOUGH the contents of the popup will exist (including the
         // test function we check for next). The outerWidth starts as 0, so a sufficient delay
         // after attempting to pop is needed.
            result = true;
        }
        else if (poppedWindow && poppedWindow.test) {
            // This is the actual test. The client window should be fine.
            result = false;
        }
        else {
            // Else we'll assume the window is not OK
            result = true;
        }

    } catch (err) {
        //if (console) {
        //    console.warn("Could not access popup window", err);
        //}
    }

    if(result)
     alert("The popup was blocked. You must allow popups to use this site.");
}

To use it just do this:

var popup=window.open('location',etc...);
checkPopupBlocked(popup);

If the popup get's blocked, the alert message will display after the 5 second grace period (you can adjust that, but 5 seconds should be quite safe).

Tirewoman answered 21/10, 2010 at 18:18 Comment(0)
C
2

This fragment incorporates all of the above - For some reason - StackOverflow is excluding the first and last lines of code in the code block below, so I wrote a blog on it. For a full explanation and the rest of the (downloadable) code have a look at my blog at thecodeabode.blogspot.com

var PopupWarning = {

    init : function()
    {

        if(this.popups_are_disabled() == true)
        {
            this.redirect_to_instruction_page();
        }
    },

    redirect_to_instruction_page : function()
    {
        document.location.href = "http://thecodeabode.blogspot.com";
    },

    popups_are_disabled : function()
    {
        var popup = window.open("http://localhost/popup_with_chrome_js.html", "popup_tester", "width=1,height=1,left=0,top=0");

        if(!popup || popup.closed || typeof popup == 'undefined' || typeof popup.closed=='undefined')
        {
            return true;
        }

        window.focus();
        popup.blur();

        //
        // Chrome popup detection requires that the popup validates itself - so we need to give
        // the popup time to load, then call js on the popup itself
        //
        if(navigator && (navigator.userAgent.toLowerCase()).indexOf("chrome") > -1)
        {
            var on_load_test = function(){PopupWarning.test_chrome_popups(popup);};     
            var timer = setTimeout(on_load_test, 60);
            return;
        }


        popup.close();
        return false;
    },

    test_chrome_popups : function(popup)
    {
        if(popup && popup.chrome_popups_permitted && popup.chrome_popups_permitted() == true)
        {
            popup.close();
            return true;
        }

        //
        // If the popup js fails - popups are blocked
        //
        this.redirect_to_instruction_page();
    }
};

PopupWarning.init();
Cleanshaven answered 2/11, 2010 at 8:33 Comment(0)
J
2

Wow there sure are a lot of solutions here. This is mine, it uses solutions taken from the current accepted answer (which doesn't work in latest Chrome and requires wrapping it in a timeout), as well as a related solution on this thread (which is actually vanilla JS, not jQuery).

Mine uses a callback architecture which will be sent true when the popup is blocked and false otherwise.

window.isPopupBlocked = function(popup_window, cb)
{
    var CHROME_CHECK_TIME = 2000;       // the only way to detect this in Chrome is to wait a bit and see if the window is present

    function _is_popup_blocked(popup)
    {
        return !popup.innerHeight;
    }

    if (popup_window) {
        if (popup_window.closed) {
            // opened OK but was closed before we checked
            cb(false);
            return;
        }
        if (/chrome/.test(navigator.userAgent.toLowerCase())) {
            // wait a bit before testing the popup in chrome
            setTimeout(function() {
                cb(_is_popup_blocked(popup_window));
            }, CHROME_CHECK_TIME);
        } else {
            // for other browsers, add an onload event and check after that
            popup_window.onload = function() {
                cb(_is_popup_blocked(popup_window));
            };
        }
    } else {
        cb(true);
    }
};
Judo answered 28/8, 2014 at 23:31 Comment(0)
C
1

Jason's answer is the only method I can think of too, but relying on position like that is a little bit dodgy!

These days, you don't really need to ask the question “was my unsolicited popup blocked?”, because the answer is invariably “yes” — all the major browsers have the popup blocker turned on by default. Best approach is only ever to window.open() in response to a direct click, which is almost always allowed.

Communication answered 21/3, 2009 at 0:21 Comment(1)
I know best practices, etc. But I am in a situation where I need to accomplish this task. That's why I asked this question and not "should I?"Grisons
E
1

HI

I modified the solutions described above slightly and think that it is working for Chrome at least. My solution is made to detect if popup is blocked when the main page is opened, not when popup is opened, but i am sure there are some people that can modify it.:-) The drawback here is that the popup-window is displayed for a couple of seconds (might be possible to shorten a bit) when there is no popup-blocker.

I put this in the section of my 'main' window

<script type="text/JavaScript" language="JavaScript">

 var mine = window.open('popuptest.htm','popuptest','width=1px,height=1px,left=0,top=0,scrollbars=no');
 if(!mine|| mine.closed || typeof mine.closed=='undefined')
  {
    popUpsBlocked = true       
    alert('Popup blocker detected ');
    if(mine)
      mine.close();
 }
 else
 {
    popUpsBlocked = false    
    var cookieCheckTimer = null;
    cookieCheckTimer =  setTimeout('testPopup();', 3500);
 }


function testPopup()
{
  if(mine)
  {
    if(mine.test())
    {
       popUpsBlocked = false;
    }
    else
    {
        alert('Popup blocker detected ');
         popUpsBlocked = true;
     }
    mine.close();
}

} 
</script>

The popuptest looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Popup test</title>
<script type="text/javascript" language="Javascript">
   function test() {if(window.innerHeight!=0){return true;} else return false;}
</script>
</head>

<body>
</body>
</html>

As i call the test-function on the popup-page after 3500 ms the innerheight has been set correctly by Chrome.

I use the variable popUpsBlocked to know if the popups are displayed or not in other javascripts. i.e

function ShowConfirmationMessage()
{
if(popUpsBlocked)
 { 
  alert('Popups are blocked, can not display confirmation popup. A mail will be sent with the confirmation.');
 } 
 else
 { 
  displayConfirmationPopup();
 }
 mailConfirmation();
}
Esta answered 18/5, 2010 at 11:14 Comment(1)
This unfortunately assumes that page that you are trying to pop up is controlled by us. I need to open an external page that i have no control over.Verdie
P
1
function openPopUpWindow(format)
{   
    var win = window.open('popupShow.html',
                          'ReportViewer',
                          'width=920px,height=720px,left=50px,top=20px,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=1,maximize:yes,scrollbars=0');

    if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0) || win.test == "undefined") 
    {
        alert("The popup was blocked. You must allow popups to use this site.");  
    }
    else if (win)
    {
        win.onload = function()
        {          
            if (win.screenX === 0) {
                alert("The popup was blocked. You must allow popups to use this site.");
                win.close();
            } 
        };
    }
}
Prairie answered 13/4, 2011 at 9:20 Comment(0)
C
0

As far as I can tell (from what I've tested) Chrome returns a window object with location of 'about:blank'. So, the following should work for all browsers:

var newWin = window.open(url);
if(!newWin || newWin.closed || typeof newWin.closed=='undefined' || newWin.location=='about:blank')
{
    //POPUP BLOCKED
}
Craver answered 2/8, 2010 at 11:45 Comment(1)
the location will still be "about:blank" even for pop-up that is not blocked. I tested on the Chrome v28.0.1500.72Verdie

© 2022 - 2024 — McMap. All rights reserved.