Avoid browser popup blockers

Question

I m developing an OAuth authentication flow purely in JavaScript and I want to show the user the  grant access  window in a popup  but it gets blocked   How can I prevent pop up windows created by either window open or window showModalDialog from being blocked by the different browsers  pop-up blockers

User · Accepted Answer

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

User · Answer

I tried multiple solutions  but his is the only one that actually worked for me in all the browsers  let newTab   window open     newTab location href   url

User · Answer

Based on Jason Sebring s very useful tip  and on the stuff covered here and there  I found a perfect solution for my case  Pseudo code with Javascript snippets   immediately create a blank popup on user action  var importantStuff   window open       blank      Enrich the call to window open with whatever additional options you need   Optional  add some  quot waiting quot  info message  Examples  a  An external HTML page  replace the above line with  var importantStuff   window open  http   example com waiting html     blank     b  Text  add the following line below the above one   importantStuff document write  Loading preview         fill it with content when ready  when the AJAX call is returned  for instance   importantStuff location href    https   example com finally html    Alternatively  you could close the window here if you don t need it after all  if ajax request fails  for example - thanks to  Goose for the comment    importantStuff close       I actually use this solution for a mailto redirection  and it works on all my browsers  windows 7  Android   The  blank bit helps for the mailto redirection to work on mobile  btw

User · Answer

The easiest way to get rid of this is to    Dont use document open    Instead use this document location href   location  where location is the url to be loaded   Ex      lt script gt  function loadUrl location    this document location href   location    lt  script gt    lt div onclick  loadUrl  company page jsp    gt Abc lt  div gt    This worked very well for me   Cheers

User · Answer

I didn t want to make the new page unless the callback returned successfully  so I did this to simulate the user click   function submitAndRedirect     apiCall then    redirect      gt          const a   document createElement  a          a href   redirect        a target     blank         document body appendChild a         a click          document body removeChild a

User · Answer

In addition Swiss Mister post  in my case the window open was launched inside a promise  which turned the popup blocker on  my solution was  in angular    scope gotClick   function       var myNewTab   browserService openNewTab      someService getUrl   then      function res           browserService updateTabLocation res url  myNewTab                    browserService   this openNewTab   function         var newTabWindow    window open         return newTabWindow     this updateTabLocation   function tabLocation  tab         if  tabLocation          tab close                tab location href   tabLocation      this is how you can open a new tab using the promise response and not invoking the popup blocker

User · Answer

As a good practice I think it is a good idea to test if a popup was blocked and take action in case  You need to know that window open has a return value  and that value may be null if the action failed  For example  in the following code   function pop url w h        n window open url   blank   toolbar 0 location 0 directories 0 status 1 menubar 0 titlebar 0 scrollbars 1 resizable 1 width   w   height   h       if n  null            return true            return false      if the popup is blocked  window open will return null  So the function will return false      As an example  imagine calling this function directly from any link   with target   blank   if the popup is successfully opened  returning   false will block the link action  else if the popup is blocked    returning true will let the default behavior  open new  blank   window  and go on     lt a href  http   whatever com  target   blank  onclick  return pop  http   whatever com  300 200     gt       This way you will have a popup if it works  and a  blank window if   not    If the popup does not open  you can    open a blank window like in the example and go on open a fake popup  an iframe inside the page  inform the user   please allow popups for this site   open a blank window and then inform the user etc

User · Answer

My use case  In my react app  Upon user click there is an API call performed to the backend  Based on the response  new tab is opened with the api response added as params to the new tab URL  in same domain   The only caveat in my use case is that it takes more for 1 second for the API response to be received  Hence pop-up blocker shows up  if it is active  when opening up URL in a new tab  To circumvent the above described issue  here is the sample code  var new tab window open   axios get  http   backend-api   then response  gt       const url  quot http   someurl quot   quot  response quot      new tab location href url     catch error  gt         catch error     Summary  Create an empty tab  as above line 1  and when the API call is completed  you can fill up the tab with the url and skip the popup blocker

User · Answer

from Google s oauth JavaScript API  http   code google com p google-api-javascript-client wiki Authentication See the area where it reads  Setting up Authentication The client s implementation of OAuth 2 0 uses a popup window to prompt the user to sign-in and approve the application  The first call to gapi auth authorize can trigger popup blockers  as it opens the popup window indirectly  To prevent the popup blocker from triggering on auth calls  call gapi auth init callback  when the client loads  The supplied callback will be executed when the library is ready to make auth calls  I would guess its relating to the real answer above in how it explains if there is an immediate response  it won t trip the popup alarm  The  quot gapi auth init quot  is making it so the api happens immediately  Practical Application I made an open source authentication microservice using node passport on npm and the various passport packages for each provider  I used a standard redirect approach to the 3rd party giving it a redirect URL to come back to  This was programmatic so I could have different places to redirect back to if login signup and on particular pages  github com sebringj athu passportjs org

[javascript] Avoid browser popup blockers

Examples related to javascript

[javascript] Avoid browser popup blockers

Examples related to javascript

Examples related to popup

Examples related to modal-dialog

Examples related to popup-blocker