How to open new tab in JavaScript without switching to the new tab?

Solution 1:

The web browser automatically focuses on the new tab, but you can call the focus back:

function openWindow( url )
{
  window.open(url, '_blank');
  window.focus();
}

<a href="http://www.example.com/" onclick="javascript:openWindow(this.href);return false;">Click Me</a>

Solution 2:

Unfortunately, you can't currently do that -- but you can get close. You can open a new window, and if you do that without specifying any window dimensions or window features, most modern browsers will open a new tab instead (depending on the user's preferences, but then, you want to do what the user prefers anyway, right?). So just window.open(url) or window.open(url, name) if you're going to use the name for something. Be sure to do this in direct response to a user-initiated event, otherwise the browser's pop-up blocker will probably...block the pop-up. :-)

Live example

Regarding keeping focus on your window...good luck with that. You can call window.focus() after window.open(...), but in my experience it doesn't usually work.

Throwing it out there: If you make the thing the user interacts with a genuine link with a URL, the user can decide whether to open it in a new tab, a new window, whatever and whether to give it focus (if they're sophisticated enough to know Shift+Click and Ctrl+Shift+Click, or the right-click menu).

Solution 3:

Unfortunately, you can't do this in ALL browsers, but you can do this in Chrome if you implement browser's extension. How to manipulate with tabs in Chrome by javascript:

http://code.google.com/chrome/extensions/tabs.html

chrome.tabs.create(object createProperties, function callback)
    Creates a new tab. Note: This function can be used without requesting the 'tabs' permission in the manifest.
Parameters
    **createProperties** ( object )
    **windowId** ( optional integer )
       The window to create the new tab in. Defaults to the current window.
    **index** ( optional integer )
       The position the tab should take in the window. The provided value will be clamped to between zero and the number of tabs in the window.
    **url** ( optional string )
       The URL to navigate the tab to initially. Fully-qualified URLs must include a scheme (i.e.    'http://www.google.com', not 'www.google.com'). Relative URLs will be relative to the current page within the extension. Defaults to the New Tab Page.
    **selected** ( optional boolean )
       Whether the tab should become the selected tab in the window. Defaults to true
    pinned ( optional boolean )
       Whether the tab should be pinned. Defaults to false
    **callback** ( optional function )

Solution 4:

This is user specific settings, you cannot change this behavior from JS.

Solution 5:

(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')))