¿Cómo puedo abrir un enlace en una nueva ventana?

94

Tengo un controlador de clic para un enlace específico, dentro del cual quiero hacer algo similar a lo siguiente:

window.location = url

Sin embargo, necesito esto para abrir la URL en una nueva ventana, ¿cómo hago esto?

Chris
fuente

Respuestas:

204

Te puede gustar:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

También puede configurar el targeten _blankrealidad.

Sarfraz
fuente
pero este código de jquery no navegará al objetivo automáticamente
Amr Elgarhy
26
_blank es el objetivo predeterminado, por lo que usar window.open (url) debería ser suficiente
themerlinproject
No estoy seguro de que ayude y no exactamente el mismo problema, pero estaba buscando la misma solución para descargar un archivo (no desde un enlace sino un botón) y en Chrome la ventana no se abrió y no se descargó hasta que simplemente cambie a window.location = 'url' que no cambia de ubicación pero descarga el archivo ...
gdoumenc
window.open (url) está bien :)
fudu
33

Aquí se explica cómo forzar el objetivo dentro de un controlador de clic:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});
chadwackerman
fuente
5
No es necesario usar el selector jQuery en el controlador de clic, por lo que la línea $(this).attr('target', '_blank'); podría cambiarse a this.target = "_blank";Además, si los enlaces de anclaje en la página se pueden modificar para tener rel="external"atributos, entonces podría crear un controlador de clic global para la página con el selector jQuery en a[rel="external"]lugar de tener un haga clic en el controlador por enlace seleccionado cona#link_id
himanshu
4

También puede usar el método jquery prop () para esto.

$(function(){
  $('yourselector').prop('target', '_blank');
}); 
Usha
fuente
2

Acabo de encontrar una solución interesante a este problema. Estaba creando intervalos que contienen información basada en el retorno de un servicio web. Pensé en intentar poner un enlace alrededor del tramo para que si hacía clic en él, la "a" capturara el clic.

Pero estaba tratando de capturar el clic con el intervalo ... así que pensé por qué no hacer esto cuando creé el intervalo.

var span = $('<span id="something" data-href="'+url+'" />');

Luego vinculé un controlador de clic al intervalo que creó un enlace basado en el atributo 'data-href':

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

Esto me permitió hacer clic con éxito en un intervalo y abrir una nueva ventana con una URL adecuada.

Dramoth
fuente
1

¿Qué pasa con <a href="myurl.html" target="_blank">My Link</a>? No se necesita Javascript ...

Michaja Broertjes
fuente
1

esta solución también consideró el caso de que la URL esté vacía y deshabilite (gris) el enlace vacío.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>

Scott 混合 理论
fuente
0

Tenga en cuenta si desea ejecutar solicitudes AJAX dentro de la función del controlador de eventos para el evento de clic. Por alguna razón, Chrome (y tal vez otros navegadores) no abrirá una nueva pestaña / ventana.

usuario2618825
fuente
0

Esta no es una solución muy buena pero funciona:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

Javascript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Ejemplo en vivo: http://jsfiddle.net/7eRLb/

adriandorina
fuente
0

Microsoft IE no admite un nombre como segundo argumento.

window.open('url', 'window name', 'window settings');

El problema es window name . Esto funcionará:

window.open('url', '', 'window settings')

Microsoft solo permite los siguientes argumentos, si usa ese argumento en absoluto:

  • _blanco
  • _medios de comunicación
  • _padre
  • _buscar
  • _yo
  • _parte superior

Consulte este sitio de Microsoft

dhanesh sr
fuente
4
-1: A pesar de su copia / pegado que viola la licencia de stackoverflow.com/a/1462500/560648 , eso no es cierto. El argumento se apoya . Simplemente no puede contener espacios, guiones u otros signos de puntuación. Lea otras respuestas y comentarios sobre esa pregunta.
Lightness Races in Orbit