Test For Popup Blocker Using JavaScript
Several websites rely on the ever-so-annoying popup window. As much as well all hate popup windows, some websites do benefit and justly require them. The problem is that some people have their popup blocker on but don't know it -- thus the new window doesn't open. Of course the browser notifies the user but it isn't always as obvious as it should be. Here's a quick method for testing if your popup window is being blocked.
The 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();
}
The first step is to give the directive to open a new window, saving what's returned. Then we check to see if the object exists. If it does, we're good. If it doesn't, we give an alert to the user that their popup blocker may be on. The specific text warning can be set to whatever you'd like, as could the method of giving them the message. You could also use a sexy MooTools slider to show the message.
Excellent post.
I wasn’t aware of the “scrollbars, resizable” style for popups, I was under the impression that you need resizable=yes or something similar.
Oh, nitpick: I recommend triple === when using typeof. I’m can’t think of an attack that circumvents == though. Thanks, David!
I am designing a website in which the signing page would have multiple pop-up using java script. So my question to you is that are you aware of a website with multiple popup using javascrip? If so, could you give me that web address?
Just for the sake of discussion… what features could a website need to implement with a popup window that they couldn’t use a properly positioned modal overlay instead? The only things I can think of is javascript that requires the original window to resize – in order to have the popup adjacent/parallel to it. Otherwise, assuming that most users use only one monitor, the popup window will still be over the content to some degree. Thoughts?
@Aaron Saray: I usually see them used for admin-type consoles. For stuff like there, where it’s a “user-desired login destination”, I’ll accept a popup box.
I didn’t check recently but to my mind browsers don’t block popup from the same domain AND provided by a click
@ピエールランリ・ラヴィン: I’m actually under the same impression. I think the browser will interpret that as a “user-requested popup” and displays it anyway… But I may be wrong.
It seems like this might not be an end-all solution. Chrome, at least, always returns that the
window.open()call succeeds, yet still blocks the popup. In the event that you’re taking some other action with the current page and relying on that return, such as redirecting the user or moving on to the next step in a process, then you’ll end up tripping over yourself. I’ve been trying to find a robust solution to popup detection for a while with little success. It’s good to see the discussion, though.There is no justified use of a popup, at least that I am aware of. You can always use modal windows or frames. If you really need to bring up a page outside of your own scope, use an anchor target of _blank (i understand this is not ‘standards compliant’ while in a strict doc type, though it really should be).
Those who try to justify popups use arguments based in fallacies. I assume they are not aware or do not posses the skill set needed for other ‘modern’ solutions.
A select box with a list of external websites. How else do you suggest opening those pages in a new window
onchangeother thanwindow.open..? This is a popup implementation i am using right now.Please restrain yourself from making such self-righteous comments that don’t add anything to problem discussed. This may not be an issue for you in your case, but for many other people, who for example may be dealing with 3rd party service provider that they have no control over, needs a solution to detect and warn their user. Your comment on ‘I assume they are not aware or do not posses the skill set needed for other ‘modern’ solutions’ only proves that you’re a self-deluded person who has not ever dealt with real life jobs whatsoever. Get of your high horse ffs.
@Timothy: Eh, that may bit a bit harsh.
@Timothy: It is not my intent to attack anyone in my comment. May sound kind of harsh but it is just my view on the situation.
Though, to credit the other side, nothing is ever black and white. It is all shades of gray.
@David Walsh: Ah I was writing my own reply as you replied. I still stand by it though.
Quite a narrow minded view. Ofcourse there are uses for popups. I’m working on an application right now that requires them. A modal wont do as we dont weant to constrain the user to a a single monitor. To suggest that people that write code that uses pop ups rather that modals are behind the times is harsh and to be frank very wrong.
@popup-haters:
1. Gmail chat, you can pop the chat out in to a separate window.
2. Public Wireless panels (though admittedly I close them, but they are justified if it’s a pay-by-the-minute thing)
3. My own web app for my billing / invoicing / project management. I have a popout button for nearly every screen, so I can have an invoice preview open in one window and my expenses or billing in another.
4. An document repository app I do consulting for has the main navigation area and then the document creation section. It’s much more handy for the document creation to be a popup so that you can switch between the windows if you need to go back and so some admin work without losing the work on your document.
5. That reminds me … Google docs pops up a new window for new documents / spreadsheets too.
6. Tech support chat on a website.
There are times where it’s totally appropriate. A modal window has a very different use than a popup.
@Ryan Florence:
1. Good point. Justified.
2. I’ve been on Public Wireless that just redirects the page you are on, doesn’t do a popup. But then again, I have not used pay-by-the-minute.
3. These should be done with anchors and target of
_blank, correct? Popups are triggered via JS. The_blankwould put it in a new tab, and you could pop it out via the browser if you really want to move it to a diff screen.4. Same as 3.
5. I’m not a user of Google Docs, but I assume it could be the same as 3.
6. Same as 3.
Agreed that a modal window is different than a popup. But a popup is really only considered a popup if triggered by JS. JS popups always set the page in a new browser instance, not a new tab (assuming you are in a newer browser). So, you can employ anchors to open the pages as new windows, not a JS popup. And, like I said, you can drag a tab on most new browsers out, which causes it to ‘pop’ out.
As for the Gmail chat, that is a case where I agree on it being justified. You wouldn’t want a dialog like that in a new window, rather on top of what you are already viewing.
Also, I guess there is an advantage with popups since you can use JS to interact with the parent window. Though in these cases I don’t see why a modal window would not be the better route.
@Ryan Florence:
Disagree. We hae an application where the user can pop widgets out of the main window and spread them around their multiple monitors. The state of this setup is then saved. When the user logs back into the system the next day. he seens the screen exactly as it was left. We cant use links for this. its triggered purely by js.
What if someone needs to use a dynamically changing link that switches behaviour when evoked i.e. when someone requests current lat/long coordinates and needs to be posted to a new Google maps page for directions?
I generally failsafe it with the following ;)
var href= "http://google.com", popUp = window.open(href, '_blank' ); if (popUp === null || typeof popUp === "undefined") { location.href = href; } else { popUp.focus(); }There is a full-proof way to see if popups are blocked. Have the popup defer to a callback on the caller window if it is successfully loaded. After a timeout you can defer to an error callback.
@Chris the Developer: You mean use a JS defer? That is not a good cross-browser solution. Defer is not fully (or even) implemented in some browsers.
@timothy:
I do application consulting and I’m known for saying “Pop-up is a four-letter word.” So we are probably on the same page typically.
Most of the time I try to validate my code against the w3c, and as you mentioned earlier, they don’t like
_blank, so JS is the only option if you write valid code.Regardless of the spec though, I do like the control you get by creating a window via JavaScript (like no toolbars, address bar, etc.)
#3 I really don’t want to click the anchor, grab the tab, move it out of my browser, then resize the window to get a nice invoice preview. 1 click v. a click, a click + drag, and another click + drag.
#4 the people using this software very often have 1024 x 768 screens and even 800 x 600. We pull MS Word into the window. Add IE’s
200pxtoolbar + word’s200pxtoolbar and they are all out of vertical room. We use a popup to get rid of the IE toolbars.#5 you bet
#6 Not sure how this is different from google chat. Same points as before though, nice to have control over the window (no toolbars, small size, etc.)
…or start in an error state and clear the error state when the popup loads via JavaScript in the popup window…
@timothy – perhaps my choice of words was misleading. I am not talking about JS defers. Simply the execution of callbacks by delay on the parent or from the popup.
Incidentally, defer (verb) means to put off, or postpone.
@Chris the Developer: Gotchya. I understand the concept of deferring, just misunderstood it as a reference to a JS defer.
@Ryan Florence: I do think we are on the same page. I respect your feedback, and honestly I agree the majority of it. You’ve brought up some points that I didn’t think of. I was a bit quick on the harshing.
Some (older) browsers do not like the spaces in the parameters
I do the following which should work with or without blockers
function pop(link) { var popUp = window.open(link.href, link.target, 'width=1000,height=700,left=24,top=24,scrollbars,resizable'); return (popup)?false:true; }The above link was
a href=”somepage.html” target=”_blank” onClick=”return pop(this)”
hi i need to add post comment code like this can u send me the code
I don’t really get this no-popup-ever philosophy, for instance when surfing I usually use middle click all the time. I always open links in a new tab simply for it’s easier that way than trying to remember in which tab I need to press back button and how many steps I need to go back to get back to the text I was reading or products I was browsing. And when I get back I want it to be exactly as I left it, and with history back you never get that completely.
As long as popups are opened as tabs (normal browsers have this option) and only when I click on the link, I don’t see the slightest problem with having multiple windows opened. And why would user care if window is opened from JS or with target _blank? I really don’t see how one thing is better than other, from users’ point of view. Obviously javascript is abused and it’s easier to block all popups, than to let spammers pass by, but it’s an argument against spammers, not against popups as an interface element.
Hi,
Is there anyway to “block the popups blocker” ?
Using this script the feature does not work on the chrome is always returned the popup is unlocked, as I apply this fix on script
http://www.cerebrum.com.br/diversos/test_popup_chrome.htm
Using this script the feature does not work on the chrome is always returned the popup is unlocked, as I apply this fix on script ???
http://www.cerebrum.com.br/diversos/test_popup_chrome.htm
Thank you friends for their knowledge of great help to me.
Hello friends I want to ask? If I want to use more than 2 links that how? I see the code above uses only one link alone is not, please answer.
today 2.8.2012 i upgraded to 4.1 firmware on my ps3 that include a browser upgrade. well i am now forced to the new look gmail and when i try to open a sent link it crashes or says oops turn off your popup blocker. say what? i have cookies on and i have no on and off popup blocker option. like i want to be brain raped anyways. i am now using my old fat ps3 with 3.61 and the old look gmail works fine.
how about 4 my ps3 ?
I cant even fill-out online job apps , because I can’t disable popup blocker
please help.
If the pop-up page you’re opening is on the same domain as the parent, you can just call a function on the parent after the pop-up is opened.
I just wrote up an example of my thoughts and posted it here:
mikeled.com/scripts/popups/parent2.html
Users can use ablockplus.org popup blocker.It is able to block unwanted ads & Annoying ads.