Pregunta Abra una URL en una nueva pestaña (y no en una nueva ventana) usando JavaScript


Estoy tratando de abrir un URL en una nueva pestaña, a diferencia de una ventana emergente. He visto preguntas relacionadas donde las respuestas serían algo así como:

window.open(url,'_blank');
window.open(url);

Pero ninguno de ellos funcionó, el navegador aún intentó abrir una ventana emergente.


1588
2018-02-05 15:52


origen


Respuestas:


Nada que un autor pueda hacer puede optar por abrir en una pestaña nueva en lugar de abrir una ventana nueva. Es un preferencia del usuario.

CSS3 propuesto objetivo-nuevo, pero la especificación fue abandonada.

los marcha atrás no es verdad; especificando dimensiones para la ventana en el tercer argumento de window.open, puede activar una nueva ventana cuando la preferencia es por pestañas.


699
2018-02-05 15:53



Este es un truco

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

En la mayoría de los casos, esto debería suceder directamente en el onclick controlador para el enlace para evitar bloqueadores de ventanas emergentes y el comportamiento predeterminado de "nueva ventana". Puede hacerlo de esta manera, o agregando un detector de eventos a su DOM objeto.

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

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


1256
2017-07-08 14:49



window.open() no se abrirá en una pestaña nueva si no está sucediendo en el evento de clic real. En el ejemplo dado, la URL se está abriendo en el evento de clic real. Esto funcionará siempre que el usuario tenga la configuración adecuada en el navegador.

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

Del mismo modo, si está tratando de hacer una llamada Ajax dentro de la función de hacer clic y desea abrir una ventana en caso de éxito, asegúrese de estar haciendo la llamada Ajax con la async : false conjunto de opciones.


315
2017-10-31 13:15



window.open No se pueden abrir ventanas emergentes de manera confiable en una nueva pestaña en todos los navegadores

Los diferentes navegadores implementan el comportamiento de  window.open  de diferentes maneras, especialmente con respecto a las preferencias del navegador del usuario. No puedes esperar el mismo comportamiento para window.open Es cierto en todo Internet Explorer, Firefox y Chrome, debido a las diferentes formas en que manejan las preferencias del navegador de un usuario.

Por ejemplo, los usuarios de Internet Explorer (11) pueden elegir abrir ventanas emergentes en una nueva ventana o en una nueva, no puede obligar a los usuarios de Internet Explorer 11 a abrir ventanas emergentes de cierta manera a través de  window.open, como se alude en La respuesta de Quentin.

En cuanto a los usuarios de Firefox (29), el uso de window.open(url, '_blank')  depende de las preferencias de las pestañas de su navegador, aunque todavía puede obligarlos a abrir ventanas emergentes en una nueva ventana especificando un ancho y alto (consulte la sección "¿Qué pasa con Chrome?" a continuación).

Demostración

Vaya a la configuración de su navegador y configúrelo para abrir ventanas emergentes en una nueva ventana.

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Página de prueba

Después de configurar Internet Explorer (11) para abrir ventanas emergentes en una nueva ventana como se demostró anteriormente, use la siguiente página de prueba para probar 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 que las ventanas emergentes están abiertas en una nueva ventana, no en una nueva pestaña.

También puedes probar esos fragmentos en Firefox (29) con su preferencia de pestaña establecida en ventanas nuevas, y ver los mismos resultados.

¿Qué hay de Chrome? Implementa window.open A diferencia de Internet Explorer (11) y Firefox (29).

No estoy 100% seguro, pero parece que Chrome (versión 34.0.1847.131 m) no parece tener ninguna configuración que el usuario pueda usar para elegir si abrir ventanas emergentes en una nueva ventana o una nueva pestaña (como Firefox e Internet Explorer). lo comprobé la documentación de Chrome para administrar ventanas emergentes, pero no mencionó nada sobre ese tipo de cosas.

También, una vez más, diferentes navegadores parecen implementar el comportamiento de  window.open  diferentemente. En Chrome y Firefox, especificar un ancho y alto forzará una ventana emergente, incluso cuando un usuario ha configurado Firefox (29) para abrir nuevas ventanas en una nueva pestaña (como se menciona en las respuestas a JavaScript se abre en una nueva ventana, no en una pestaña)

<!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>

Sin embargo, el mismo fragmento de código anterior siempre abrirá una nueva pestaña en Internet Explorer 11 si los usuarios establecen pestañas como sus preferencias de navegador, ni siquiera especificar un ancho y alto forzará una nueva ventana emergente para ellos.

Entonces el comportamiento de window.open en Chrome parece ser abrir ventanas emergentes en una nueva pestaña cuando se utiliza en una onclick evento, para abrirlos en ventanas nuevas cuando se usa desde la consola del navegador (como lo notaron otras personas), y abrirlos en ventanas nuevas cuando se especifiquen con ancho y alto.

Resumen

Los diferentes navegadores implementan el comportamiento de  window.open  de manera diferente con respecto a las preferencias del navegador de los usuarios. No puedes esperar el mismo comportamiento para window.open Es cierto en todo Internet Explorer, Firefox y Chrome, debido a las diferentes formas en que manejan las preferencias del navegador de un usuario.

Lectura adicional


224
2018-05-01 19:42



Un trazador de líneas:

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

o

Con jQuery Estoy usando este:

var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();

Crea un virtual a elemento, lo da target="_blank" por lo que se abre en una nueva pestaña, le da la adecuada url  href y luego hace clic.

Y si lo desea, con base en eso puede crear alguna función:

function openInNewTab(url) {
    $("<a>").attr("href", url).attr("target", "_blank")[0].click();
}

y luego puedes usarlo como:

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

Para no jQuery escenario, la función se vería así:

function openInNewTab(url) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = url;
    a.click();
}

// And then
openInNewTab("http://google.com");

136
2018-02-06 20:35



Para elaborar la respuesta de Steven Spielberg, hice esto en tal caso:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

De esta forma, justo antes de que el navegador siga el enlace, estoy configurando el atributo de destino, por lo que abrirá el enlace en una nueva pestaña o ventana (depende de la configuración del usuario)


55
2018-04-05 15:02



Si utiliza window.open(url, '_blank'), se bloqueará (bloqueador de ventanas emergentes) en Chrome.

Prueba esto:

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

51
2018-05-28 16:43