Cómo simular target = "_ blank" en JavaScript

156

Cuando un usuario hace clic en un enlace, necesito actualizar un campo en una base de datos y luego abrir el enlace solicitado en una nueva ventana. La actualización no es un problema, pero no sé cómo abrir una nueva ventana sin requerir que hagan clic en otro hipervínculo.

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>
javascript Phillip Senn
fuente
1
Hm? target="_top"no se abre en una nueva ventana, target="_blank"sí.
Tomalak
Si el enlace ya se está abriendo en una nueva ventana (debido a target = "_ blank") y el controlador de clic de JavaScript ya está actualizando su base de datos, ¿por qué necesitaría abrir la nueva ventana con Javascript?
Joel Mueller

Respuestas:

298 
<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

El segundo parámetro es opcional y es el nombre de la ventana de destino.

ChristopheD
fuente
2
window.openhace lo que target="_blank"hace: abre la URL en una nueva ventana.
ceejayoz
3
si. El segundo argumento para window.open () es el "nombre" que desea darle a la ventana, similar a establecer un objetivo en un enlace. developer.mozilla.org/En/DOM:window.open
Omer Bokhari
2
Oh ya veo. window.open está bloqueado por el bloqueador de ventanas emergentes de Firefox, pero target = "_ blank" no lo está. ¿Debo pedirle al cliente que habilite las ventanas emergentes desde su propio sitio web?
Phillip Senn el
77
¿Existe una solución de JavaScript que no sea bloqueada por bloqueadores de ventanas emergentes como la de Firefox?
ma11hew28
44
@MattDiPasquale que bloquea window.open es un poco el objetivo de los bloqueadores de ventanas emergentes. Si realiza la llamada en respuesta a una acción de clic, tiene más posibilidades de no ser bloqueado.
William Denniss
19

Esto puede ayudar

var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    link.href = 'http://www.google.com';
    link.target = '_blank';
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': false,
        'cancelable': true
    });
    link.dispatchEvent(event);
Jair Reina
fuente
IE11: "Error de Javascript en tiempo de ejecución: no es una acción válida para el objeto"
T-moty
8
Esta respuesta podría mejorarse agregando alguna descripción de lo que está sucediendo
Elly Post el
13

Sé que este es un trato hecho y resuelto, pero esto es lo que estoy usando para resolver el problema en mi aplicación.

if (!e.target.hasAttribute("target")) {
    e.preventDefault();     
    e.target.setAttribute("target", "_blank");
    e.target.click();
    return;
}

Básicamente, lo que está sucediendo aquí es que verifico si el enlace tiene un target=_blankatributo. Si no lo hace, detiene la activación del enlace, lo configura para abrirse en una nueva ventana y luego hace clic programáticamente en él.

Puede ir un paso más allá y omitir la detención del clic original (y hacer que su código sea mucho más compacto) al intentar esto:

if (!e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
}

Si estaba usando jQuery para abstraer la implementación de agregar un atributo de navegador cruzado, debería usar esto en lugar de e.target.setAttribute("target", "_blank"):

    jQuery(event.target).attr("target", "_blank")

Es posible que deba volver a trabajarlo para que se ajuste a su caso de uso exacto, pero así es como me rasqué mi propio picor.

Aquí hay una demostración en acción para que te metas.

(El enlace en jsfiddle vuelve a esta discusión ... no necesita una nueva pestaña :))

akamaozu
fuente
1
Prefiero esta respuesta sobre todo porque, bueno, usa jquery y evita los problemas del bloqueador de ventanas emergentes de window.open. Esto es perfectamente legítimo cuando se trata con algunos datos de terceros que contienen enlaces a los que les falta el objetivo.
IncredibleHat
7

Personalmente prefiero usar el siguiente código si es para un solo enlace. De lo contrario, probablemente sea mejor si crea una función con un código similar.

onclick="this.target='_blank';"

Empecé a usar eso para evitar la estricta prueba XHTML del W3C.

Zennethe Fuchs
fuente
1
Creo que JavaScript en línea es más complicado que agregar un atributo "no estándar" que funciona en todas partes.
Matti Virkkunen
@MattiVirkkunen en ciertas situaciones es la única solución
Claudiu Creanga
1
@Claudiu: Si te encuentras en una situación tan absurda, deberías solucionar la causa en lugar de ignorarla.
Matti Virkkunen
5

Así es como lo hago con jQuery. Tengo una clase para cada enlace que quiero que se abra en una nueva ventana.

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});
Jindra Helcl
fuente
2

Puede extraer el href de la etiqueta a:

window.open(document.getElementById('redirect').href);
treznik
fuente
1

Esto podría ayudarlo a abrir todos los enlaces de la página :

$(".myClass").each(
     function(i,e){
        window.open(e, '_blank');
     }
);

Abrirá todos los <a href="" class="myClass"></a>elementos de enlace a otra pestaña como si hubiera hecho clic en cada uno.

Solo necesita pegarlo en la consola del navegador. Se requiere el marco jQuery

radacina
fuente