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

2102

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 verían así:

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

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

javascript marca
fuente
85
Esto suele ser una cuestión de preferencia. A algunas personas les gustan las ventanas (y protegen ferozmente este comportamiento), algunas pestañas (y protegen ferozmente este comportamiento). Por lo tanto, estaría derrotando un comportamiento que generalmente se considera cuestión de gustos, no de diseño.
Jared Farrish
42
Javascript no sabe nada acerca de su navegador y las pestañas frente a las ventanas, por lo que depende realmente del navegador decidir cómo abrir una nueva ventana.
Andrey
3
¿Cómo puedo configurar Chrome para mostrarlo en una nueva pestaña, en lugar de una ventana emergente?
Marcar
8
Gmail hace esto de alguna manera, al menos en Chrome. Shift + clic en una fila de correo electrónico y abre ese correo electrónico en una nueva ventana. Ctrl + clic y lo abre en una nueva pestaña. El único problema: cavar en el código ofuscado de Gmail es un PITA
Sergio
48
@ Sergio, ese es el comportamiento predeterminado del navegador para cualquier enlace. (Para Chrome y Firefox al menos). No tiene nada que ver con Gmail.
Qtax

Respuestas:

929

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 pestañas nuevas, 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.

Quentin
fuente
42
@AliHaideri El Javascript no tiene nada que ver con cómo se abre la nueva pestaña / ventana. Todo está determinado por la configuración de su navegador. El uso window.openle dice al navegador que abra algo nuevo, luego el navegador abre lo que se elige en su configuración: pestaña o ventana. En los navegadores con los que probó, cambie la configuración para que se abra en una nueva ventana en lugar de una pestaña y verá que las soluciones de los demás son incorrectas.
Ian
239
Dos cosas que desperdician el tiempo de otras personas más que decirles algo no se pueden hacer. (1) Decirles algo que no se puede hacer se puede hacer. (2) Permanecer en silencio y dejar que sigan buscando una manera de hacer algo que no se puede hacer.
Quentin
8
@ Cupcake: la documentación generalmente no se molesta en describir características que no existen. evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/…
Quentin
99
@Neel: porque se trata de manera sucinta sobre un tema que mucha gente quiere saber.
Quentin
44
Los autores pueden hacer cosas (principalmente escribiendo código diferente). Ninguna de esas cosas activará una pestaña en lugar de una ventana.
Quentin
1734

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 onclickcontrolador 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 DOMobjeto. 

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

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

Rinto George
fuente
117
No funciona. Recibí un mensaje a la derecha de la barra de direcciones: ventana emergente bloqueada . Entonces permití ventanas emergentes. Y voilà, ¡se abre en una ventana emergente, no en una pestaña ! Chrome 22.0.1229.94 en OS X Lion.
nalply
39
@ b1naryatr0phy Eso es porque en realidad no lo probaste correctamente. Cambie la configuración en sus navegadores. La configuración de su navegador determina si se abre en una pestaña o ventana. No hay nada que pueda hacer llamando a window.open (o cualquier Javascript) para elegir cómo abrir la nueva ventana / pestaña.
Ian
Pregunta: configuro url sin protocolo (por ejemplo, my.site.com/Controller/Index). Como resultado, obtengo una nueva ventana (pestaña) por url, como la url de la página actual (desde donde uso la función OpenInNewTab) más la función url. Con la ventana de protocolo se abre por el enlace correcto. ¿Por qué?
user2167382
2
var win = window.open (url, '_blank'); el '_blank' no es necesario, para window.open () , el segundo parámetro es strWindowName, para: Un nombre de cadena para la nueva ventana. El nombre se puede utilizar como destino de enlaces y formularios utilizando el atributo de destino de un elemento <a> o <form>. El nombre no debe contener ningún espacio en blanco. Tenga en cuenta que strWindowName no especifica el título de la nueva ventana.
HydRAnger
¿Hay alguna manera de hacer que esto abra una nueva pestaña sin que sea un iframe de espacio aislado? Cuando uso esto, obtengo errores de CORS porque el valor de document.domain no cambia ya que se abre como un iframe.
Ids van der Zee
380

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 la async : falseopción establecida.

Venkat Kotra
fuente
28
Sería bueno marcar esta como la respuesta CORRECTA. Mis pruebas con Chrome v26 (Windows) confirman que si el código está dentro del controlador de clic de un botón, se abre una nueva pestaña y si el código se invoca mediante programación, por ejemplo, desde la consola, se abre una nueva ventana.
CyberFonic
2
@ Ian De mis pruebas en navegadores con configuración predeterminada, esta respuesta funciona en los casos en que las respuestas anteriores no lo hacen. La respuesta aceptada que dice "no hay nada que puedas hacer" solo es cierta cuando el usuario ha cambiado la configuración predeterminada.
Garfield
@ Ian En aras de la claridad, mencioné esto en la advertencia de respuesta sobre la configuración del usuario. "Esto funcionará siempre que el usuario tenga la configuración adecuada en el navegador". Creo que la mayoría de los usuarios no cambian la configuración del navegador y esta respuesta funciona para la mayoría de ellos.
Venkat Kotra
async: falseNo funciona en Chrome. Para abrir una nueva ventana desde la devolución de llamada, primero debe abrir una ventana vacía antes de enviar la solicitud HTTP y luego actualizarla. Aquí hay un buen truco .
Attacomsian
250

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

Los diferentes navegadores implementan el comportamiento de window.open diferentes maneras, especialmente con respecto a las preferencias del navegador de un usuario. No puede esperar que el mismo comportamiento window.opensea ​​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 elegir abrir ventanas emergentes en una nueva ventana o una nueva pestaña, no se puede obligar a los usuarios de Internet Explorer 11 a abrir ventanas emergentes de una determinada manera window.open , como se alude en la respuesta de Quentin .

En cuanto a los usuarios de Firefox (29), el uso window.open(url, '_blank') depende de las preferencias de 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 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)

Diálogo de configuración de Internet Explorer 1

Diálogo de configuración de la pestaña Internet Explorer

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 puede probar esos fragmentos anteriores en Firefox (29) con su preferencia de pestaña establecida en nuevas ventanas y ver los mismos resultados.

¿Qué hay de Chrome? Se implementa de manera window.opendiferente 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 abrir o no las ventanas emergentes en una nueva ventana o una nueva pestaña (como Firefox e Internet Explorer) tener). 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 manera window.open diferente. 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 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.openen Chrome parece ser abrir ventanas emergentes en una nueva pestaña cuando se usa en un onclickevento, abrirlas en ventanas nuevas cuando se usan desde la consola del navegador ( como lo han señalado otras personas ) y abrirlas en ventanas nuevas cuando especificado con un ancho y una altura.

Resumen

Los diferentes navegadores implementan el comportamiento de manera window.open diferente con respecto a las preferencias del navegador de los usuarios. No puede esperar que el mismo comportamiento window.opensea ​​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

Peter Mortensen
fuente
12
No respondiste la pregunta, solo probaste que window.open es inconsistente.
BentOnCoding
223

Un trazador de líneas:

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

Crea un aelemento virtual , lo proporciona target="_blank"para que se abra en una nueva pestaña, lo asigna correctamente url hrefy 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 cualquier otra solución en esta página) debe llamarse 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 llama manualmente en algún momento aleatorio (por ejemplo, dentro de un intervalo o después de la respuesta del servidor), puede ser bloqueado por el navegador (lo que tiene sentido ya que sería un riesgo de seguridad y podría conducir a una experiencia de usuario muy pobre) )

pie6k
fuente
8
Gracias. Su JS puro tiene una pieza faltante: como escribió Luke Alderton (ver más abajo), debe adjuntar el elemento creado al cuerpo del documento, en su código está colgado en el vacío y al menos en Firefox 37 no hace nada .
greenoldman
44
@mcginniwa Cualquier acción como esta: si no se activa por la acción del usuario, como el clic del mouse, se activará el bloqueador de ventanas emergentes. Imagine que puede abrir cualquier url con Javascript sin la acción del usuario; eso sería bastante peligroso. Si coloca este código dentro del evento como la función de clic, funcionará bien, es lo mismo con todas las soluciones propuestas aquí.
pie6k
44
Puede simplificar su código de la siguiente manera: $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
shaedrich
55
@shaedrich, inspirado por tu corte, agregué un jinery sin jquery:Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
pie6k
¡No funciona en FF!
Nolesh
91

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

Prueba esto:

//With JQuery

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

Con JavaScript puro,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
Mohammed Safeer
fuente
Pero en esta pregunta, no mencionan sobre el autor del sitio. Solo quiero abrir una url en una nueva ventana o nueva pestaña. Esto depende del navegador. No necesitamos preocuparnos por el autor. Por favor revisa ese violín. Está funcionando
Mohammed Safeer
Se descubrió que no funcionaba en js fiddle and plunker, pero funciona cuando crea un archivo html. Es porque js fiddle, la salida se muestra en el iframe, por lo que se bloquea una nueva ventana debido athe request was made in a sandboxed frame whose 'allow-popups' permission is not set
Mohammed Safeer
67

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

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

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

Un ejemplo de línea en jQuery:

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

Esto también se puede lograr simplemente utilizando las API DOM del navegador nativo:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
arikfr
fuente
58

¡Utilizo lo siguiente y funciona muy bien!

window.open(url, '_blank').focus();
Ezequiel García
fuente
2
Esto podría abrirse en una nueva pestaña o ventana dependiendo de la configuración del navegador. La pregunta es específicamente sobre abrir en una nueva pestaña, incluso si las preferencias son para una nueva ventana.
Quentin
19

Un hecho interesante es que la nueva pestaña no se puede abrir si el usuario no invoca la acción (haciendo clic en un botón o algo) o si es asíncrona, por ejemplo, esto NO se abrirá en una nueva pestaña:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

Pero esto puede abrirse en una nueva pestaña, dependiendo de la configuración del navegador:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
karaxuna
fuente
2
Esto se está bloqueando como una ventana emergente en Firefox 28, Chrome 34b y Safari 7.0.2, todas las configuraciones de stock. :(
Steve Meisner
1
"la nueva pestaña no se puede abrir si el usuario no invoca la acción (haciendo clic en un botón o algo) o si es asíncrona" : es cierto para Chrome, pero no es cierto para todos los navegadores. Guarde <script>open('http://google.com')</script>en un .htmlarchivo y ábralo en una nueva instalación de una versión reciente de Firefox; observará que Firefox felizmente abre Google en una nueva pestaña (tal vez después de que le diga que permita ventanas emergentes), no una nueva ventana.
Mark Amery
13

Simplemente omitiendo los parámetros [strWindowFeatures] se abrirá una nueva pestaña, A MENOS QUE la configuración del navegador anule (la configuración del navegador prevalece sobre JavaScript).

Nueva ventana

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

Nueva pestaña

var myWin = window.open(strUrl, strWindowName);

- o -

var myWin = window.open(strUrl);
MannyC
fuente
11 
(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')))
spirinvladimir
fuente
11

Puedes usar un truco con form:

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

jsFiddle demo

CodeNinja
fuente
44
Si utiliza este método, asegúrese de que la url no tenga parámetros de consulta porque se omitirán mediante el envío del formulario. Una solución es incrustar elementos de entrada ocultos dentro del elemento de formulario que tienen namecomo clave y valuecomo valor para todos los parámetros dentro de los parámetros de consulta. Y luego envíe el formulario
Mudassir Ali
Esto se puede hacer de manera más simple con una aetiqueta en lugar de un formulario, y utilizando el .click()método jQuery para "enviarlo". compruebe mi respuesta
10

Esto no tiene nada que ver con la configuración del navegador si está intentando abrir una nueva pestaña desde una función personalizada.

En esta página, abra una consola de JavaScript y escriba:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

E intentará abrir una ventana emergente independientemente de su configuración, porque el 'clic' proviene de una acción personalizada.

Para comportarse como un "clic del mouse" real en un enlace, debe seguir el consejo de @ spirinvladimir y realmente crearlo:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

Aquí hay un ejemplo completo (no lo intente en jsFiddle o editores en línea similares, ya que no le permitirá redirigir a páginas externas desde allí):

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
chipairon
fuente
1
Terminé yendo a una solución diferente donde hago w = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)según theandystratton.com/2012/…
Paul Tomblin
11
@FahadAbidJanjua Absolutamente no es correcto. Todavía depende de la configuración del navegador. No hay nada en las especificaciones HTML o Javascript que declare que una "acción personalizada" debe abrirse en una ventana emergente en lugar de una pestaña. De hecho, ninguno de los navegadores en mi máquina actual muestra este comportamiento.
nmclean
7 
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
Andrew Luca
fuente
1
Esto podría abrirse en una nueva pestaña o ventana dependiendo de la configuración del navegador. La pregunta es específicamente sobre abrir en una nueva pestaña, incluso si las preferencias son para una nueva ventana.
Quentin
3

JQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
Bryan
fuente
Esto podría abrirse en una nueva pestaña o ventana dependiendo de la configuración del navegador. La pregunta es específicamente sobre abrir en una nueva pestaña, incluso si las preferencias son para una nueva ventana.
Quentin
2

O simplemente puede crear un elemento de enlace y hacer clic en él ...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

Esto no debería ser bloqueado por ningún bloqueador de ventanas emergentes ... Con suerte.

Luke Alderton
fuente
2

Hay una respuesta a esta pregunta y no es no.

Encontré un trabajo fácil alrededor:

Paso 1: crea un enlace invisible:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

Paso 2: haga clic en ese enlace mediante programación:

document.getElementById("yourId").click();

¡Aqui tienes! Funciona un encanto para mí.

ALZlper
fuente
Esto podría abrirse en una nueva pestaña o ventana dependiendo de la configuración del navegador. La pregunta es específicamente sobre abrir en una nueva pestaña, incluso si las preferencias son para una nueva ventana.
Quentin
1

ingrese la descripción de la imagen aquí

Investigué mucha información sobre cómo abrir una nueva pestaña y permanecer en la misma pestaña. He encontrado un pequeño truco para hacerlo. Supongamos que tiene una url que necesita abrir: newUrl y url anterior: currentUrl , en la que debe permanecer después de abrir una nueva pestaña. El código JS se verá como el siguiente:

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;
Vaha
fuente
La pregunta es acerca de abrir una nueva pestaña cuando la preferencia del usuario es abrirlas en nuevas ventanas. No está preguntando cómo abrir una URL en una pestaña nueva mientras se abre otra URL en la pestaña existente al mismo tiempo.
Quentin
0

¿Qué hay de la creación de un <a>con _blankcomo targetvalor del atributo y la urltanhref , con la exhibición de estilo: oculto, con aa elemento de los niños? Luego agregue al DOM y luego active el evento click en un elemento secundario.

ACTUALIZAR

Eso no funciona El navegador evita el comportamiento predeterminado. Podría activarse mediante programación, pero no sigue el comportamiento predeterminado.

Verifique y vea por usted mismo: http://jsfiddle.net/4S4ET/

Víctor
fuente
-1

Abrir una nueva pestaña desde una extensión de Firefox (Mozilla) es así:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
Smile4ever
fuente
-1

De esta manera es similar a la solución anterior pero implementada de manera diferente

.social_icon -> alguna clase con CSS 

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });
CG_DEV
fuente
-1

Esto podría ser un truco, pero en Firefox si especifica un tercer parámetro, 'pantalla completa = sí', se abre una nueva ventana nueva.

Por ejemplo,

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

Parece anular la configuración del navegador.

Kunal
fuente
-1

esto funciona para mí, solo prevenga el evento, agregue la url a y <a> tagluego active el evento de clic en eso tag.

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>
Carlos Salazar
fuente
Esto podría abrirse en una nueva pestaña o ventana dependiendo de la configuración del navegador. La pregunta es específicamente sobre abrir en una nueva pestaña, incluso si las preferencias son para una nueva ventana.
Quentin
-1

Se window.open(url)abrirá la URL en la nueva pestaña del navegador. Abajo JS alternativa a ella

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

Aquí hay un ejemplo de trabajo (los fragmentos de stackoverflow no permiten abrir una nueva pestaña)

Kamil Kiełczewski
fuente
"La ventana abierta (url) abrirá la url en la nueva pestaña del navegador" - Seguirá las preferencias del usuario para una nueva ventana o una nueva pestaña. No forzará una nueva pestaña cuando se prefiera una ventana. (De eso se trata la pregunta). Lo mismo se aplica a target = _blank.
Quentin
Ambos enfoques que sugiere han sido mencionados (y criticados) muchas veces en las 56 respuestas anteriores no eliminadas sobre esta pregunta.
Quentin
-1

Si se abre la URL en una nueva pestaña o en una nueva ventana, en realidad está controlado por las preferencias del navegador del usuario. No hay forma de anularlo en JavaScript.

window.open()se comporta de manera diferente dependiendo de cómo se use. Si se llama como resultado directo de una acción del usuario , digamos que haga clic en un botón, debería funcionar bien y abrir una nueva pestaña (o ventana):

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

Sin embargo, si intenta abrir una nueva pestaña desde una devolución de llamada de solicitud AJAX , el navegador la bloqueará, ya que fue una acción directa del usuario.

Para omitir el bloqueador de ventanas emergentes y abrir una nueva pestaña desde una devolución de llamada, aquí hay un pequeño truco :

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});
Attacomsian
fuente
-1

Lo intenté de esta manera y parece funcionar bien

window.open('example.com', 'newWin');

He encontrado muchos ejemplos de trabajo aquí:

http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html#TestPopupControl

Artem Shevtsov
fuente
Eso se abrirá en una nueva pestaña o ventana según las preferencias del usuario. No forzará una nueva pestaña, de eso se trata la pregunta.
Quentin
¿Te perdiste un poco en la pregunta cuando el OP ya lo intentó? o stackoverflow.com/a/59565074/19068 ? o stackoverflow.com/a/35939565/19068 ? o stackoverflow.com/a/30512485/19068 ? o stackoverflow.com/a/11384018/19068 ? o stackoverflow.com/a/26990478/19068 ?
Quentin
@Quentin Me perdí esa parte, pero cuando intenté llamar a window.open con el segundo parámetro «windowName» igual a «_blank» o sin él, la ventana emergente o la nueva pestaña no aparecieron en el último Google Chrome. Cuando cambié el nombre de la ventana a «newWin», se abrió una nueva pestaña. Es extraño porque el parámetro del nombre de la ventana es opcional.
Artem Shevtsov
-4

Voy a estar un poco de acuerdo con la persona que escribió (parafraseado aquí): "Para un enlace en una página web existente, el navegador siempre abrirá el enlace en una pestaña nueva si la nueva página forma parte del mismo sitio web que la página web existente ". Para mí, al menos, esta "regla general" funciona en Chrome, Firefox, Opera, IE, Safari, SeaMonkey y Konqueror.

De todos modos, hay una forma menos complicada de aprovechar lo que la otra persona presentó. Suponiendo que estamos hablando de su propio sitio web ("thissite.com" a continuación), donde desea controlar lo que hace el navegador, luego, a continuación, desea que "specialpage.htm" esté VACÍO, sin HTML en absoluto ( ahorra tiempo enviando datos desde el servidor!).

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }
vernonner3voltazim
fuente
-7

Si solo desea abrir los enlaces externos (enlaces que van a otros sitios), entonces este bit de JavaScript / jQuery funciona bien:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});
Michael
fuente
Esta respuesta no es adecuada para esta pregunta. PERO, ¡esto es muy útil! ¡Gracias por tu idea!
Nuri Akman
-9

El navegador siempre abrirá el enlace en una nueva pestaña si el enlace está en el mismo dominio (en el mismo sitio web). Si el enlace está en algún otro dominio, lo abrirá en una nueva pestaña / ventana, dependiendo de la configuración del navegador.

Entonces, de acuerdo con esto, podemos usar:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

Y agregue un código jQuery:

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

Entonces, primero abra una nueva ventana en el mismo sitio web con _blank target (lo abrirá en una nueva pestaña), y luego abra el sitio web deseado dentro de esa nueva ventana.

loshMiS
fuente