Open a URL in a new tab and not a new window

Question

I m trying to open a URL in a new tab  as opposed to a popup window   I ve seen related questions where the responses would look something like   window open url   blank    window open url     But none of them worked for me  the browser still tried to open a popup window

User · Answer

You can use a trick with form     function              btn   click function              openNewTab  http   stackoverflow com           return false               function openNewTab link        var frm       lt form   method  get  action      link      target   blank  gt  lt  form gt           body   append frm       frm submit   remove        jsFiddle demo

User · Answer

Just omitting  strWindowFeatures  parameters will open a new tab  UNLESS the browser setting overrides  browser setting trumps JavaScript    New window  var myWin   window open strUrl  strWindowName   strWindowFeatures      New tab  var myWin   window open strUrl  strWindowName     -- or --  var myWin   window open strUrl

User · Answer

I use the following and it works very well   window open url    blank   focus

User · Answer

Or you could just create a link element and click it     var evLink   document createElement  a    evLink href    http       strUrl  evLink target     blank   document body appendChild evLink   evLink click       Now delete it evLink parentNode removeChild evLink     This shouldn t be blocked by any popup blockers    Hopefully

User · Answer

Do not use target  quot  blank quot  Always use specific name for that window  in my case meaningfulName  in this case you save processor resource  button addEventListener  click        gt        window open  https   google com    meaningfulName       On this way when you click for example 10 times on button  browser will always re-render it in one new tab  instead of opening it in 10 different tabs which will consume much more resources  You can read more about this on MDN

User · Answer

I m going to agree somewhat with the person who wrote  paraphrased here    For a link in an existing web page  the browser will always open the link in a new tab if the new page is part of the same web site as the existing web page    For me  at least  this  general rule  works in Chrome  Firefox  Opera  IE  Safari  SeaMonkey  and Konqueror   Anyway  there is a less complicated way to take advantage of what the other person presented   Assuming we are talking about your own web site   thissite com  below   where you want to control what the browser does  then  below  you want  specialpage htm  to be EMPTY  no HTML at all in it  saves time sending data from the server      var wnd  URL     global variables     specifying   blank  in window open   is SUPPOSED to keep the new page from replacing the existing page  wnd   window open  http   www thissite com specialpage htm     blank      get reference to just-opened page    if the  general rule  above is true  a new tab should have been opened   URL    http   www someothersite com desiredpage htm      ultimate destination  setTimeout gotoURL   200      wait 1 5 of a second  give browser time to create tab window for empty page    function gotoURL      wnd open URL    self       replace the blank page  in the tab  with the desired page    wnd focus                  when browser not set to automatically show newly-opened page  this MAY work

User · Answer

How about creating an  lt a gt  with  blank as target attribute value and the url as href  with style display hidden with a a children element  Then add to the DOM and then trigger the click event on a children element   UPDATE  That doesn t work  The browser prevents the default behaviour  It could be triggered programmatically  but it doesn t follow the default behaviour   Check and see for yourself  http   jsfiddle net 4S4ET

User · Answer

This way is similar to the above solution but implemented differently     social icon -  some class with CSS      lt div class  social icon  id  SOME ID  data-url  SOME URL  gt  lt  div gt         social icon   click function             var url     this  attr  data-url            var win   window open url    blank        similar to above solution         win focus

User · Answer

JQuery      lt a   gt     href   url   target     blank    get 0  click      JS  Object assign document createElement  a      target    blank   href   URL HERE    click

User · Answer

this work for me  just prevent the event  add the url to an  lt a gt  tag then trigger the click event on that tag   Js     myBtn   on  click   function event            event preventDefault              this  attr  href   http   someurl com              this  trigger  click        HTML  lt a href     class  myBtn  target   blank  gt Go lt  a gt

User · Answer

The window open url  will open url in new browser Tab  Belowe JS alternative to it  let a  document createElement  a    a target    blank   a href   https   support wwf org uk    a click       we don t need to remove  a  from DOM because we not add it   here is working example  stackoverflow snippets not allow to opening new tab

User · Answer

Whether to open the URL in a new tab or a new window  is actually controlled by the user s browser preferences  There is no way to override it in JavaScript  window open   behaves differently depending on how it is being used  If it is called as a direct result of a user action  let us say a button click  it should work fine and open a new tab  or window   const button   document querySelector   openTab        add click event listener button addEventListener  click        gt           open a new tab     const tab   window open  https   attacomsian com     blank         However  if you try to open a new tab from an AJAX request callback  the browser will block it as it was not a direct user action  To bypass the popup blocker and open a new tab from a callback  here is a little hack  const button   document querySelector   openTab        add click event listener button addEventListener  click        gt            open an empty window     const tab   window open  about blank            make an API call     fetch   api validate            then res   gt  res json             then json   gt                    TODO  do something with JSON response                 update the actual URL             tab location    https   attacomsian com               tab focus                        catch err   gt                   close the empty window             tab close

User · Answer

This has nothing to do with browser settings if you are trying to open a new tab from a custom function   In this page  open a JavaScript console and type   document getElementById  nav-questions   setAttribute  target     blank    document getElementById  nav-questions   click      And it will try to open a popup regardless of your settings  because the  click  comes from a custom action   In order to behave like an actual  mouse click  on a link  you need to follow  spirinvladimir s advice and really create it   document getElementById  nav-questions   setAttribute  target     blank    document getElementById  nav-questions   dispatchEvent  function e     e initMouseEvent  click   true  true  window  0  0  0  0  0                      false  false  false  false  0  null     return e   document createEvent  MouseEvents         Here is a complete example  do not try it on jsFiddle or similar online editors  as it will not let you redirect to external pages from there     lt  DOCTYPE html gt   lt html gt   lt head gt     lt style gt       firing div         margin-top  15px        width  250px        border  1px solid blue        text-align  center           lt  style gt   lt  head gt   lt body gt     lt a id  my link  href  http   www google com  gt  Go to Google  lt  a gt     lt div id  firing div  gt  Click me to trigger custom click  lt  div gt   lt  body gt   lt script gt    function fire custom click         alert  firing click         document getElementById  my link   dispatchEvent  function e         e initMouseEvent  click   true  true  window     type  canBubble  cancelable  view                0  0  0  0  0                  detail  screenX  screenY  clientX  clientY                false  false  false  false     ctrlKey  altKey  shiftKey  metaKey                0  null                        button  relatedTarget          return e       document createEvent  MouseEvents             document getElementById  firing div   onclick   fire custom click   lt  script gt   lt  html gt

User · Answer

There are lots of answer copies suggesting using  quot  blank quot  as the target  however I found this didn t work  As Prakash notes  it is up to the browser  However  you can make certain suggestions to the browser  such as to whether the window should have a location bar  If you suggest enough  quot tab-like things quot  you might get a tab  as per Nico s answer to this more specific question for chrome  window open  http   www stackoverflow com     blank    toolbar yes  location yes  status yes  menubar yes  scrollbars yes     Disclaimer  This is not a panacea  It is still up to the user and browser  Now at least you ve specified one more preference for what you d like your window to look like

User · Answer

Nothing an author can do can choose to open in a new tab instead of a new window  it is a user preference   Note that the default user preference in most browsers is for new tabs  so a trivial test on a browser where that preference hasn t been changed will not demonstrate this   CSS3 proposed target-new  but the specification was abandoned  The reverse is not true  by specifying certain window features for the window in the third argument of window open    you can trigger a new window when the preference is for tabs

User · Answer

I researched a lot of information about how to open new tab and stay on the same tab  I have found one small trick to do it  Lets assume you have url which you need to open - newUrl and old url - currentUrl  which you need to stay on after new tab opened  JS code will look something like next      init urls let newUrl    http   example com   let currentUrl   window location href     open window with url of current page  you will be automatically moved     by browser to a new opened tab  It will look like your page is reloaded    and you will stay on same page but with new page opened window open currentUrl     blank       on your current tab will be opened new url location href   newUrl

User · Answer

This might be a hack  but in Firefox if you specify a third parameter   fullscreen yes   it opens a fresh new window   For example    lt a href     onclick  window open  MyPDF pdf     blank    fullscreen yes    return false   gt MyPDF lt  a gt    It seems to actually override the browser settings

User · Answer

This is a trick     function openInNewTab url      var win   window open url    blank      win focus        In most cases  this should happen directly in the onclick handler for the link to prevent pop-up blockers  and the default  new window  behavior  You could do it this way  or by adding an event listener to your DOM object      lt div onclick  openInNewTab  www test com     gt Something To Click On lt  div gt    http   www tutsplanet com open-url-new-tab-using-javascript

User · Answer

The browser will always open the link in a new tab if the link is on the same domain  on the same website   If the link is on some other domain it will open it in a new tab window  depending on browser settings   So  according to this  we can use    lt a class  my-link  href  http   www mywebsite com  rel  http   www otherwebsite com  gt new tab lt  a gt    And add some jQuery code   jQuery document  ready function          jQuery   my-link   on  click  function            var w   window open  http   www mywebsite com    blank            w focus            w location href   jQuery this  attr  rel            return false                So  first open new window on same website with  blank target  it will open it in new tab   and then open your desired website inside that new window

User · Answer

function openTab url      const link   document createElement  a      link href   url    link target     blank     document body appendChild link     link click      link remove

User · Answer

An interesting fact is that the new tab can not be opened if the action is not invoked by the user  clicking a button or something  or if it is asynchronous  for example  this will NOT open in new tab     ajax       url   url       type   POST       success  function             window open  url     blank                              But this may open in a new tab  depending on browser settings     ajax       url   url       type   POST       async  false      success  function             window open  url     blank

User · Answer

window open   will not open in a new tab if it is not happening on the actual click event  In the example given the URL is being opened on the actual click event  This will work provided the user has appropriate settings in the browser    lt a class  link  gt Link lt  a gt   lt script  type  text javascript  gt          a link   on  click  function             window open  www yourdomain com    blank              lt  script gt    Similarly  if you are trying to do an Ajax call within the click function and want to open a window on success  ensure you are doing the Ajax call with the async   false option set

User · Answer

Somehow a website can do it   I don t have the time to extract it from this mess  but this is the code   if   Array prototype indexOf      Array prototype indexOf   function searchElement  fromIndex            if  this     undefined    this     null              throw new TypeError   this  is null or not defined            var length   this length  gt  gt  gt  0          fromIndex    fromIndex    0          if  Math abs fromIndex      Infinity              fromIndex   0          if  fromIndex  lt  0                fromIndex    length              if  fromIndex  lt  0                  fromIndex   0                   for    fromIndex  lt  length  fromIndex                if  this fromIndex      searchElement                  return fromIndex          return -1         function Popunder options        var  parent  popunder  posX  posY  cookieName  cookie  browser  numberOfTimes  expires   -1          wrapping  url               size  frequency  mobilePopupDisabled   options mobilePopupDisabled      if  this instanceof Popunder     false          return new Popunder options       try            parent   top    self  amp  amp  typeof top document location toString        string    top   self       catch  e             parent   self           cookieName    adk2 popunder       popunder   null      browser   function             var n   navigator userAgent toLowerCase                b                     webkit   webkit  test n                   mozilla   mozilla  test n   amp  amp     compatible webkit   test n                   chrome   chrome  test n                   msie   msie  test n   amp  amp    opera  test n                   firefox   firefox  test n                   safari   safari  test n   amp  amp    chrome  test n                   opera   opera  test n                         b version   b safari    n match       ri          d              1     n match       ox me ra ie         d              1           return b              initOptions options        function initOptions options            options   options                if  options wrapping              wrapping   options wrapping          else               options serverdomain   options serverdomain     ads adk2 com               options size   options size     800x600               options ci    3               var arr                       excluded     serverdomain    numOfTimes    duration    period                for  var p in options                  options hasOwnProperty p   amp  amp  options p  toString    amp  amp  excluded indexOf p      -1  amp  amp  arr push p         encodeURIComponent options p                 url    http       options serverdomain     player html rt popunder amp     arr join   amp                      if  options size                size   options size split  x                options width   size 0               options height   size 1                    if  options frequency                frequency      0-9       0-9     w   exec options frequency               options numOfTimes    frequency 1               options duration    frequency 2               options period                      m   minute                   h   hour                   d   day                 frequency 3  toLowerCase                      if  options period              switch  options period toLowerCase                      case  minute                       expires   options duration   60   1e3                      break                  case  hour                       expires   options duration   60   60   1e3                      break                  case  day                       expires   options duration   24   60   60   1e3                       posX   typeof options left     undefined    options left toString     window screenX          posY   typeof options top     undefined    options top toString     window screenY          numberOfTimes   options numOfTimes            function getCookie name            try               var parts   document cookie split name                     if  parts length    2                  return unescape parts pop   split      shift    split                catch  err                function setCookie value  expiresDate            expiresDate   cookie 1     expiresDate toGMTString            document cookie   cookieName         escape value         expiresDate      expires     expiresDate     path               function addEvent listenerEvent            if  document addEventListener              document addEventListener  click   listenerEvent  false           else             document attachEvent  onclick   listenerEvent             function removeEvent listenerEvent            if  document removeEventListener              document removeEventListener  click   listenerEvent  false           else             document detachEvent  onclick   listenerEvent             function isCapped             cookie   getCookie cookieName                 return   numberOfTimes  amp  amp   numberOfTimes  lt    cookie 0             function pop             var features    type fullWindow  fullscreen  scrollbars yes               listenerEvent   function                     var now  next                  if   Android webOS iPhone iPad iPod BlackBerry IEMobile Opera Mini i test navigator userAgent                       if  mobilePopupDisabled                          return                  if  isCapped                        return                  if  browser chrome  amp  amp  parseInt browser version split      0   10   gt  30  amp  amp  adParams openNewTab                        now   new Date                      next   new Date now setTime now getTime     expires                        setCookie   cookie 0     0    1  next                       removeEvent listenerEvent                       window open  javascript window focus       self                            simulateClick url                       popunder   null                   else                     popunder    parent window open url  Math random   toString 36  substring 7   features                   if  wrapping                        popunder document write   lt html gt  lt head gt  lt  head gt  lt body gt     unescape wrapping            lt  body gt  lt  html gt                         popunder document body style margin   0                                   if  popunder                        now   new Date                      next   new Date now setTime now getTime     expires                        setCookie   cookie 0     0    1  next                       moveUnder                        removeEvent listenerEvent                                           addEvent listenerEvent            var simulateClick   function url            var a   document createElement  a                u    url    data text html  lt script gt window close    lt   script gt      url              evt   document createEvent  MouseEvents            a href   u          document body appendChild a           evt initMouseEvent  click   true  true  window  0  0  0  0  0  true  false  false  true  0  null           a dispatchEvent evt           a parentNode removeChild a              function moveUnder             try               popunder blur                popunder opener window focus                window self window focus                window focus                if  browser firefox                  openCloseWindow                else if  browser webkit                  openCloseTab                else                 browser msie  amp  amp  setTimeout function                         popunder blur                        popunder opener window focus                        window self window focus                        window focus                      1e3            catch  e                function openCloseWindow             var tmp   popunder window open  about blank            tmp focus            tmp close            setTimeout function                 try                   tmp   popunder window open  about blank                    tmp focus                    tmp close                 catch  e                1             function openCloseTab             var ghost   document createElement  a                clk          document getElementsByTagName  body   0  appendChild ghost           clk   document createEvent  MouseEvents            clk initMouseEvent  click   false  true  window  0  0  0  0  0  true  false  false  true  0  null           ghost dispatchEvent clk           ghost parentNode removeChild ghost           window open  about blank    PopHelper   close             pop      adParams

User · Answer

If you use window open url    blank    it will be blocked  popup blocker  on Chrome   Try this     With JQuery      myButton   click function          var redirectWindow   window open  http   google com     blank        redirectWindow location        With pure JavaScript   document querySelector   myButton   onclick   function         var redirectWindow   window open  http   google com     blank        redirectWindow location

User · Answer

function a   document body appendChild a   a setAttribute  href   location href   a dispatchEvent  function e       e initMouseEvent  click   true  true  window  0  0  0  0  0  true  false  false  false  0  null       return e   document createEvent  MouseEvents       document createElement  a

User · Answer

There is an answer to this question and it is not no      I found an easy work around    Step 1  Create an invisible link    lt a id  yourId  href  yourlink html  target   blank  style  display  none   gt  lt  a gt   Step 2  Click on that link programmatically   document getElementById  yourId   click     Here you go  Works a charm for me

User · Answer

I think that you can t control this  If the user had setup their browser to open links in a new window  you can t force this to open links in a new tab   JavaScript open in a new window  not tab

User · Answer

window open Cannot Reliably Open Popups in a New Tab in All Browsers  Different browsers implement the behavior of window open in different ways  especially with regard to a user s browser preferences  You cannot expect the same behavior for window open to be true across all of Internet Explorer  Firefox  and Chrome  because of the different ways in which they handle a user s browser preferences   For example  Internet nbsp Explorer  11  users can choose to open popups in a new window or a new tab  you cannot force Internet nbsp Explorer nbsp 11 users to open popups in a certain way through window open  as alluded to in Quentin s answer   As for Firefox  29  users  using window open url    blank   depends on their browser s tab preferences  though you can still force them to open popups in a new window by specifying a width and height  see  What About Chrome   section below    Demonstration  Go to your browser s settings and configure it to open popups in a new window   Internet Explorer  11       Test Page  After setting up Internet Explorer  11  to open popups in a new window as demonstrated above  use the following test page to test window open    lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Test lt  title gt     lt  head gt      lt body gt       lt button onclick  window open  https   stackoverflow com q 4907843 456814     gt         lt code gt window open url  lt  code gt       lt  button gt       lt button onclick  window open  https   stackoverflow com q 4907843 456814     blank     gt         lt code gt window open url    blank   lt  code gt       lt  button gt     lt  body gt   lt  html gt    Observe that the popups are opened in a new window  not a new tab   You can also test those snippets above in Firefox  29  with its tab preference set to new windows  and see the same results   What About Chrome  It Implements window open Differently from Internet nbsp Explorer  11  and Firefox  29    I m not 100  sure  but it looks like Chrome  version 34 0 1847 131 m  does not appear to have any settings that the user can use to choose whether or not to open popups in a new window or a new tab  like Firefox and Internet nbsp Explorer have   I checked the Chrome documentation for managing pop-ups  but it didn t mention anything about that sort of thing   Also  once again  different browsers seem to implement the behavior of window open differently  In Chrome and Firefox  specifying a width and height will force a popup  even when a user has set Firefox  29  to open new windows in a new tab  as mentioned in the answers to JavaScript open in a new window  not tab     lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Test lt  title gt     lt  head gt      lt body gt       lt button onclick  window open  https   stackoverflow com q 4907843 456814    test    width 400  height 400     gt         lt code gt window open url  lt  code gt       lt  button gt     lt  body gt   lt  html gt    However  the same code snippet above will always open a new tab in Internet nbsp Explorer nbsp 11 if users set tabs as their browser preferences  not even specifying a width and height will force a new window popup for them   So the behavior of window open in Chrome seems to be to open popups in a new tab when used in an onclick event  to open them in new windows when used from the browser console  as noted by other people   and to open them in new windows when specified with a width and a height   Summary  Different browsers implement the behavior of window open differently with regard to users  browser preferences  You cannot expect the same behavior for window open to be true across all of Internet Explorer  Firefox  and Chrome  because of the different ways in which they handle a user s browser preferences   Additional Reading   window open documentation

User · Answer

To elaborate Steven Spielberg s answer  I did this in such a case      a   click function         this  attr  target     blank          This way  just before the browser will follow the link I m setting the target attribute  so it will make the link open in a new tab or window  depends on user s settings    One line example in jQuery      a   attr  target     blank   get 0  click       The   get 0   must be there to return the actual DOM element     Doing   click    on the jQuery object for it did not work    This can also be accomplished just using native browser DOM APIs as well   document querySelector  a   setAttribute  target     blank    document querySelector  a   click

User · Answer

If you only want to open the external links  links that go to other sites  then this bit of JavaScript jQuery works well     function        var hostname   window location hostname replace  www                a   each function            var link host     this  attr  hostname   replace  www                 if  link host     hostname                  this  attr  target     blank

User · Answer

function openInNewTab href      Object assign document createElement  a          target    blank       href  href       click       It creates a virtual a element  gives it target  quot  blank quot  so it opens in a new tab  gives it proper url href and then clicks it  and then you can use it like  openInNewTab  quot https   google com quot      Important note  openInNewTab  as well as any other solution on this page  must be called during the so-called  trusted event  callback - eg  during click event  not necessary in callback function directly  but during click action   Otherwise opening a new page will be blocked by the browser If you call it manually at some random moment  e g   inside an interval or after server response  - it might be blocked by the browser  which makes sense as it d be a security risk and might lead to poor user experience

User · Answer

Opening a new tab from within a Firefox  Mozilla  extension goes like this   gBrowser selectedTab   gBrowser addTab  http   example com

[javascript] Open a URL in a new tab (and not a new window)

Examples related to javascript