Abrir una URL en una nueva pestaña (y no una nueva ventana)

javascript


Estoy tratando de abrir una URL en una nueva pestaña, en lugar de una ventana emergente.

He visto preguntas relacionadas donde las respuestas se parecerían a algo:

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

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




Answer 1 Quentin


Nada que pueda hacer un autor puede elegir abrir en una nueva pestaña en lugar de una nueva ventana; Es una preferencia del usuario . (Tenga en cuenta que la preferencia de usuario predeterminada en la mayoría de los navegadores es para nuevas pestañas, por lo que una prueba trivial en un navegador donde esa preferencia no ha cambiado no demostrará esto).

CSS3 propuso target-new , pero la especificación fue abandonada .

Lo contrario no es cierto; Al especificar dimensiones para la ventana en el tercer argumento de window.open() , puede activar una nueva ventana cuando la preferencia es para pestañas.




Answer 2 Rinto George


Esto 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 controlador onclick del 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 objeto DOM .

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

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




Answer 3 Venkat Kotra


window.open() no se abrirá en una nueva pestaña si no está sucediendo en el evento de clic real. En el ejemplo dado, la URL se abre 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á intentando hacer una llamada Ajax dentro de la función de clic y desea abrir una ventana en caso de éxito, asegúrese de que está haciendo la llamada Ajax con el conjunto de opciones async : false .




Answer 4 Peter Mortensen


window.open no puede abrir ventanas emergentes de manera confiable en una pestaña nueva en todos los navegadores

Diferentes navegadores implementan el comportamiento de window.open de diferentes maneras, especialmente con respecto a las preferencias del navegador de un usuario. No puede esperar que el mismo comportamiento para window.open sea ​​verdadero 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 optar por abrir ventanas emergentes en una nueva ventana o una nueva pestaña, no puede obligar a los usuarios de Internet Explorer 11 a abrir ventanas emergentes de una determinada 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 aún puede obligarlos a abrir ventanas emergentes en una nueva ventana especificando un ancho y una altura (consulte "Qué pasa con Chrome? ", Sección a continuación).

Demonstration

Ve a la configuración de tu navegador y configúralo para que abra 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 se abren en una nueva ventana, no en una nueva pestaña.

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

¿Qué hay de Chrome? Implementa window.open de manera diferente a 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 o no ventanas emergentes en una nueva ventana o una nueva pestaña (como Firefox e Internet Explorer tienen). Revisé la documentación de Chrome para administrar ventanas emergentes , pero no mencionó nada sobre ese tipo de cosas.

Además, una vez más, diferentes navegadores parecen implementar el comportamiento de window.open de maneradiferente. En Chrome y Firefox, especificar un ancho y alto forzará una ventana emergente, incluso cuando un usuario haya configurado Firefox (29) para abrir nuevas ventanas en una nueva pestaña (como se menciona en las respuestas a JavaScript abierto 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 configuran las pestañas como preferencias de su navegador, ni siquiera especificando un ancho y una altura forzará una nueva ventana emergente para ellos.

Por lo tanto, el comportamiento de window.open en Chrome parece ser abrir ventanas emergentes en una pestaña nueva cuando se usa en un evento onclick , abrirlas en ventanas nuevas cuando se usa desde la consola del navegador ( como lo han señalado otras personas ) y abrirlas en ventanas nuevas cuando se especifica con un ancho y un alto.

Summary

Los diferentes navegadores implementan el comportamiento de window.open de maneradiferente con respecto a las preferencias del navegador de los usuarios. No puede esperar que el mismo comportamiento para window.open sea ​​verdadero en todo Internet Explorer, Firefox y Chrome, debido a las diferentes formas en que manejan las preferencias del navegador de un usuario.

Lectura adicional




Answer 5 pie6k


Un transatlántico:

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

Se crea un virtual a elemento, le da target="_blank" para que se abra en una nueva pestaña, da adecuada url href y luego hace clic en él.

Y si quieres,en base a eso puedes crear alguna función:

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

y luego puedes usarlo como:

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

Nota importante:

openInNewTab (así como a cualquier otra solución en esta página) durante la devolución de llamada de acción del usuario, por ejemplo. evento de clic interno (no es necesario en la función de devolución de llamada directamente, pero durante la acción de clic).

Si lo llamas manualmente en algún momento al azar (por ejemplo,dentro de un intervalo o después de la respuesta del servidor)-podría ser bloqueado por el navegador (lo cual tiene sentido ya que sería un riesgo de seguridad y podría llevar a una experiencia de usuario muy pobre)