Chrome, Javascript, window.open in new tab

Question

In chrome this opens in a new tab:

<button onclick="window.open('newpage.html', '_blank')" />

this opens in a new window (but I'd like this to open in a new tab as well:

<script language="javascript">
  window.open('newpage.html', '_blank');
</script>

Is this feasible?

Answer 1

You can't directly control this, because it's an option controlled by Internet Explorer users.

Opening pages using Window.open with a different window name will open in a new browser window like a popup, OR open in a new tab, if the user configured the browser to do so.

EDIT:

A more detailed explanation:

1. In modern browsers, window.open will open in a new tab rather than a popup.

2. You can force a browser to use a new window (‘popup’) by specifying options in the 3rd parameter

3. If the window.open call was not part of a user-initiated event, it’ll open in a new window.

4. A “user initiated event” does not have to the same function call – but it must originate in the function invoked by a user click

5. If a user initiated event delegates or defers a function call (in an event listener or delegate not bound to the click event, or by using setTimeout for example), it loses it’s status as “user initiated”

6. Some popup blockers will allow windows opened from user initiated events, but not those opened otherwise.

7. If any popup is blocked, those normally allowed by a blocker (via user initiated events) will sometimes also be blocked. Some examples…

Forcing a window to open in a new browser instance, instead of a new tab:

window.open('page.php', '', 'width=1000');

The following would qualify as a user-initiated event, even though it calls another function:

function o(){
  window.open('page.php');
}
$('button').addEvent('click', o);

The following would not qualify as a user-initiated event, since the setTimeout defers it:

function g(){
  setTimeout(o, 1);
}
function o(){
  window.open('page.php');
}
$('button').addEvent('click', g);

Answer 2

It is sometimes useful to force the use of a tab, if the user likes that. As Prakash stated above, this is sometimes dictated by the use of a non-user-initiated event, but there are ways around that.

For example:

$("#theButton").button().click( function(event) {
   $.post( url, data )
   .always( function( response ) {
      window.open( newurl + response, '_blank' );
   } );
} );

will always open "newurl" in a new browser window since the "always" function is not considered user-initiated. However, if we do this:

$("#theButton").button().click( function(event) {
   var newtab = window.open( '', '_blank' );
   $.post( url, data )
   .always( function( response ) {
      newtab.location = newurl + response;
   } );
} );

we open the new browser window or create the new tab, as determined by the user preference in the button click which IS user-initiated. Then we just set the location to the desired URL after returning from the AJAX post. Voila, we force the use of a tab if the user likes that.

Answer 3

At the moment (Chrome 39) I use this code to open a new tab:

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

Of course this may change in future versions of Chrome.

It is a bad idea to use this if you can't control the browser your users are using. It may not work in future versions or with different settings.

Answer 4

if you use window.open(url, '_blank') , it will be blocked(popup blocker) on Chrome,Firefox etc

try this,

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

working js fiddle for this http://jsfiddle.net/safeeronline/70kdacL4/2/

working js fiddle for ajax window open http://jsfiddle.net/safeeronline/70kdacL4/1/

Answer 5

This will open the link in a new tab in Chrome and Firefox, and possibly more browsers I haven't tested:

var popup  = $window.open("about:blank", "_blank"); // the about:blank is to please Chrome, and _blank to please Firefox
popup.location = 'newpage.html';

It basically opens a new empty tab, and then sets the location of that empty tab. Beware that it is a sort of a hack, since browser tab/window behavior is really the domain, responsibility and choice of the Browser and the User.

The second line can be called in a callback (after you've done some AJAX request for example), but then the browser would not recognize it as a user-initiated click-event, and may block the popup.

Answer 6

Clear mini-solution $('<form action="http://samedomainurl.com/" target="_blank"></form>').submit()

Answer 7

You can use this code to open in new tab..

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

I got it from stackoverflow..

Answer 8

Best way i use:

1- add link to your html:

<a id="linkDynamic" target="_blank" href="#"></a>

2- add JS function:

function OpenNewTab(href)
{
    document.getElementById('linkDynamic').href = href;
    document.getElementById('linkDynamic').click();
}

3- just call OpenNewTab function with the link you want