Bypass popup blocker on window open when JQuery event preventDefault is set

Question

I want to show a JQuery dialog conditionally on click event of an hyperlink    I have a requirement like on condition1 open a JQuery dialogue and if condition1 is not satisfied  navigate to the page as referenced by  href  tag of  whose click event is in question   I am able to call a function on link s click event  This function now checks the said condition by executing another URL  that executes my Spring controller and returns response    All works perfect with only window open being blocked by popup blocker      a href   viewpage number    live  click   function e        e preventDefault        redirectionURL   this href      pageId  getUrlVars redirectionURL   number          getJSON  redirect     pageId      function status            if  status    null                alert  Error in verifying the status               else if  status                    agreement   dialog  open              else               window open redirectionURL                           If I remove e preventDefault    from code  popoup blocker doesn t block the page  however for condition1 it then opens the dialogue as well as opens the  href  page   If I solve one  it creates issue for another  I am not able to give justice to both conditions simultaneously   Could you help me solve this issue please   Once this is solved I have another issue to solve i e  navigation on dialogue s OK event

User · Answer

try this  it works for me       myButton   click function          var redirectWindow   window open  http   google com     blank          ajax           type   POST           url    echo json            success  function  data                redirectWindow location                          Is fiddle for this http   jsfiddle net safeeronline 70kdacL4 1

User · Answer

I had this problem and I didn t have my url ready untill the callback would return some data  The solution was to open blank window before starting the callback and then just set the location when the callback returns    scope testCode   function          var newWin    window open       blank        service testCode   then function  data             scope testing   true          newWin location     Tests     data url replace      g

User · Answer

The observation that the event had to be initiated by the user helped me to figure out the first part of this  but even after that Chrome and Firefox still blocked the new window  The second part was adding target   blank  to the link  which was mentioned in one comment   In summary  you need to call window open from an event initiated by the user  in this case clicking on a link  and that link needs to have target   blank    In the example below the link is using class  button-twitter        button-twitter   click function e      e preventDefault      var href     this  attr  href      var tweet popup   window open href   tweet popup    width 500 height 300

User · Answer

Try using an a link element and click it with javascriipt   lt a id  SimulateOpenLink  href     target   blank  rel  noopener noreferrer  gt  lt  a gt    and the script  function openURL url        document getElementById  SimulateOpenLink   href   url     document getElementById  SimulateOpenLink   click       Use it like this    do stuff var id   123123141  openURL   api user     id     print     this open webpage bypassing pop-up blocker openURL  https   www google com     Another link

User · Answer

I am using this method to avoid the popup blocker in my React code  it will work in all other javascript codes also   When you are making an async call on click event  just open a blank window first and then write the URL in that later when an async call will complete    const popupWindow   window open       blank    popupWindow document write   lt div gt Loading  Plesae wait    lt  div gt      on async call s success  write the following  popupWindow document write resonse url

User · Answer

you can call window open without browser blocking only if user does directly some action  Browser send some flag and determine that window opened by user action   So  you can try this scenario         var myWindow   window open       draw any loading message in this window   when request done  just call myWindow location    http   google com

User · Answer

This code help me  Hope this help some people     formSelector   submit  function  event          event preventDefault         var newWindow   window open       blank    width 750 height 500           ajax            url  ajaxurl          type   POST           data    data            done  function  response              if     response   newWindow close            else newWindow location     url

User · Answer

var url   window open       blank    url location    url     this worked for me

User · Answer

Windows must be created on the same stack  aka microtask  as the user-initiated event  e g  a click callback--so they can t be created later  asynchronously   However  you can create a window without a URL and you can then change that window s URL once you do know it  even asynchronously   window onclick        gt         You MUST create the window on the same event      tick stack as the user-initiated event  e g  click callback    const googleWindow   window open          Do your async work   fakeAjax response   gt           Change the URL of the window you created once you        know what the full URL is      googleWindow location replace  https   google com q   response               function fakeAjax callback      setTimeout      gt        callback  example         1000       Modern browsers will open the window with a blank page  often called about blank   and assuming your async task to get the URL is fairly quick  the resulting UX is mostly fine  If you instead want to render a loading message  or anything  into the window while the user waits  you can use Data URIs   window open  data text html  lt h1 gt Loading    lt  2Fh1 gt

User · Answer

Popup blockers will typically only allow window open if used during the processing of a user event  like a click   In your case  you re calling window open later  not during the event  because   getJSON is asynchronous   You have two options    Do something else  rather than window open  Make the ajax call synchronous  which is something you should normally avoid like the plague as it locks up the UI of the browser    getJSON is equivalent to     ajax     url  url    dataType   json     data  data    success  callback          and so you can make your   getJSON call synchronous by mapping your params to the above and adding async  false     ajax       url        redirect     pageId      async     false      dataType   json       data              success   function status            if  status    null                alert  Error in verifying the status               else if  status                    agreement   dialog  open              else               window open redirectionURL                         Again  I don t advocate synchronous ajax calls if you can find any other way to achieve your goal  But if you can t  there you go   Here s an example of code that fails the test because of the asynchronous call   Live example   Live source  The live links no longer work because of changes to JSBin   jQuery function           This version doesn t work  because the window open is      not during the event processing       theButton   click function e        e preventDefault          getJSON  http   jsbin com uriyip   function           window open  http   jsbin com ubiqev                        And here s an example that does work  using a synchronous call   Live example   Live source  The live links no longer work because of changes to JSBin   jQuery function           This version does work  because the window open is      during the event processing  But it uses a synchronous      ajax call  locking up the browser UI while the call is      in progress        theButton   click function e        e preventDefault          ajax         url        http   jsbin com uriyip         async     false        dataType   json         success   function             window open  http   jsbin com ubiqev

[jquery] Bypass popup blocker on window.open when JQuery event.preventDefault() is set

Examples related to jquery

Examples related to window.open

Examples related to jquery-callback

[jquery] Bypass popup blocker on window.open when JQuery event.preventDefault() is set

Examples related to jquery

Examples related to window.open

Examples related to jquery-callback

Examples related to popup-blocker