Chrome, Javascript, window.open in new tab


110

En Chrome, esto se abre en una nueva pestaña:

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

esto se abre en una nueva ventana (pero me gustaría que esto también se abra en una nueva pestaña:

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

¿Es esto factible?


2
¿Estás seguro de lo que afirmas? Ambos fragmentos tienen el mismo resultado.
Denys Séguret

1
Si una ventana se abre en una pestaña o una nueva ventana depende del navegador local y cómo el usuario configura su navegador, no es algo que pueda especificar en javascript.
jfriend00

Respuestas:


150

No puede controlar esto directamente, porque es una opción controlada por los usuarios de Internet Explorer.

Abrir páginas usando Window.open con un nombre de ventana diferente se abrirá en una nueva ventana del navegador como una ventana emergente, O se abrirá en una nueva pestaña, si el usuario configuró el navegador para hacerlo.

EDITAR:

Una explicación más detallada:

1. En los navegadores modernos, window.open se abrirá en una nueva pestaña en lugar de una ventana emergente.

2. Puede forzar a un navegador a usar una nueva ventana ('emergente') especificando opciones en el tercer parámetro

3. Si la llamada window.open no fue parte de un evento iniciado por el usuario, se abrirá en una nueva ventana.

4. Un "evento iniciado por el usuario" no tiene la misma llamada de función, pero debe originarse en la función invocada por un clic del usuario

5. Si un evento iniciado por un usuario delega o pospone una llamada a una función (en un detector de eventos o un delegado no vinculado al evento de clic, o usando setTimeout por ejemplo), pierde su estado como "iniciado por el usuario"

6. Algunos bloqueadores de ventanas emergentes permitirán que se abran ventanas a partir de eventos iniciados por el usuario, pero no las que se abren de otro modo.

7. Si se bloquea alguna ventana emergente, a veces también se bloquearán las que normalmente permite un bloqueador (a través de eventos iniciados por el usuario). Algunos ejemplos…

Forzar que una ventana se abra en una nueva instancia del navegador, en lugar de en una nueva pestaña:

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

Lo siguiente calificaría como un evento iniciado por el usuario, aunque llame a otra función:

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

Lo siguiente no calificaría como un evento iniciado por el usuario, ya que setTimeout lo pospone:

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

2
Solo quiero agregar que probando en Chrome y FF descubrí que usar window.open en lo que define como un "evento iniciado por el usuario" mantiene la acción predeterminada del navegador. Con eso quiero decir que si en Chrome mantienes presionada la tecla shift en Chrome y haces clic en una nueva ventana del navegador aparecerá, si mantienes presionada la tecla Ctrl (o presionas el botón central del mouse) se abrirá una nueva pestaña en segundo plano. Lo cual es muy bueno, puedes hacer algunas cosas sin necesidad de colocar etiquetas de anclaje por todas partes.
Hoffmann

3
"Si la llamada window.open no fue parte de un evento iniciado por el usuario, se abrirá en una nueva ventana". No, es casi seguro que no se abrirá en absoluto.
TJ Crowder

3
A partir del 29/9/2014, los últimos enlaces de Firefox ESR e IE 11 abren _blank o window.open en una nueva ventana cuando las llamadas js usan _blank como nombre de la ventana. Chrome actual no es tan simple. Probé abrir una nueva ventana pasando arriba, izquierda, ancho, alto, barra de herramientas, ubicación, directorios, estado, barra de menú, barras de desplazamiento y redimensionable, y omitiendo cada uno de ellos a su vez. Chrome los abrió todos en una nueva pestaña, excepto cuando se omitió el estado, la barra de menú o las barras de desplazamiento. Esto parece tan arbitrario que es difícil de creer, pero empíricamente eso es lo que sucedió. Ejemplo aquí: jsbin.com/mobiyeqojaha/1
enigment

34

A veces es útil forzar el uso de una pestaña, si al usuario le gusta. Como Prakash dijo anteriormente, esto a veces es dictado por el uso de un evento no iniciado por el usuario, pero hay formas de evitarlo.

Por ejemplo:

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

siempre abrirá "newurl" en una nueva ventana del navegador, ya que la función "siempre" no se considera iniciada por el usuario. Sin embargo, si hacemos esto:

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

abrimos la nueva ventana del navegador o creamos la nueva pestaña, según lo determinado por la preferencia del usuario en el botón clic que es iniciado por el usuario. Luego, simplemente configuramos la ubicación en la URL deseada después de regresar de la publicación AJAX. Voila, forzamos el uso de una pestaña si al usuario le gusta.


Me di cuenta de que si tiene un punto de interrupción establecido en Chrome en window.open, el navegador abre una nueva ventana. Dejar que el código no se rompa parece resultar en la apertura de una nueva pestaña.
skinnybrit51

Es una solución correcta a menos que su window.open y el resultado de la función sea algo que tome 5/6/7 segundos más o menos. Considere si la función está publicando datos en un servidor que está generando un PDF que demora 10 segundos. La ventana abierta a una pestaña en blanco es inmediata y el usuario mira fijamente la pestaña en blanco durante 10 segundos hasta que mágicamente se llena. Aún en iOS, es la única solución.
Kevin Brown


11

Por el momento (Chrome 39) utilizo este código para abrir una nueva pestaña:

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

Por supuesto, esto puede cambiar en futuras versiones de Chrome.

Es una mala idea usar esto si no puede controlar el navegador que usan sus usuarios. Es posible que no funcione en versiones futuras o con configuraciones diferentes.


Según el comentario de jfriend00, la forma en que el usuario configura el navegador determina cómo se abren las nuevas ventanas, no el código.
Lee Taylor

Estoy de acuerdo con usted en que es una mala idea confiar en una solución de este tipo si no puede controlar su entorno. Pero hay algunas situaciones en las que esto es posible (por ejemplo, lo uso en una aplicación que viene con su propio Chrome portátil). Para aclarar esto, edité mi anser.
Nico Wiedemann

2
Para aquellos que se preguntan, ejecutar este fragmento de código no funciona debido a este error:VM646 js:12 Blocked opening 'http://www.stackoverflow.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
Benjamin Crouzier

6

Esto abrirá el enlace en una nueva pestaña en Chrome y Firefox, y posiblemente más navegadores que no he probado:

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

Básicamente abre una nueva pestaña vacía y luego establece la ubicación de esa pestaña vacía. Tenga en cuenta que es una especie de pirateo, ya que el comportamiento de la pestaña / ventana del navegador es realmente el dominio, la responsabilidad y la elección del navegador y del usuario.

La segunda línea se puede llamar en una devolución de llamada (después de haber realizado alguna solicitud AJAX, por ejemplo), pero luego el navegador no la reconocería como un evento de clic iniciado por el usuario y podría bloquear la ventana emergente.


1
$windowes solo la forma de usar de AngularJS window. Simplemente puede usar windowen su lugar. Más información: docs.angularjs.org/api/ng/service/$window
Magne

3

Mini solución clara $('<form action="http://samedomainurl.com/" target="_blank"></form>').submit()


0

Puede usar este código para abrir en una nueva pestaña.

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

Lo obtuve de stackoverflow ..


1
Esto funciona, pero solo si está en un controlador de clics de usuario. De lo contrario, abre una nueva ventana (pero Firefox al menos te bloqueará hasta que el usuario lo permita).
djsmith

@djsmith, estoy usando esto ... y enfrento el problema solo en IE7. Si tiene alguna otra solución, por favor sugiérala .. Gracias ..
Dilip Rajkumar

-2

La mejor forma que uso:

1- agregue un enlace a su html:

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

2- agregar función JS:

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

3- simplemente llame a la función OpenNewTab con el enlace que desee

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.