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

ID : 288

viewed : 122

Tags : javascripttabshrefjavascript





Top 5 Answer for javascript - Open a URL in a new tab (and not a new window)

vote vote

96

This is a trick,

function openInNewTab(url) {  window.open(url, '_blank').focus(); }  //or just window.open(url, '_blank').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.

<div onclick="openInNewTab('www.test.com');">Something To Click On</div> 

http://www.tutsplanet.com/open-url-new-tab-using-javascript/

vote vote

87

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.

vote vote

75

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.

<a class="link">Link</a> <script  type="text/javascript">      $("a.link").on("click",function(){          window.open('www.yourdomain.com','_blank');      }); </script> 

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.

vote vote

67

function openInNewTab(href) {   Object.assign(document.createElement('a'), {     target: '_blank',     href: href,   }).click(); } 

It creates a virtual a element, gives it target="_blank" so it opens in a new tab, gives it proper url href and then clicks it.

and then you can use it like:

openInNewTab("https://google.com");  

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)

vote vote

52

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 Explorer (11) users can choose to open popups in a new window or a new tab, you cannot force Internet Explorer 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)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

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:

<!DOCTYPE html> <html>   <head>     <title>Test</title>   </head>    <body>     <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">       <code>window.open(url)</code>     </button>     <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">       <code>window.open(url, '_blank')</code>     </button>   </body> </html> 

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 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 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):

<!DOCTYPE html> <html>   <head>     <title>Test</title>   </head>    <body>     <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">       <code>window.open(url)</code>     </button>   </body> </html> 

However, the same code snippet above will always open a new tab in Internet Explorer 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

Top 3 video Explaining javascript - Open a URL in a new tab (and not a new window)







Related QUESTION?