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

Question

Tengo un controlador de clic de un enlace específico, en el interior que yo quiero hacer algo similar a lo siguiente:

window.location = url 

Necesito esto para abrir realmente el URL en una nueva ventana, sin embargo, ¿cómo hago esto ?

Answer 1

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 podría establecer el target-_blank realidad.

Answer 2

tendrá que utilizar window.open(url);

referencias:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp

Answer 3

es cómo forzar el objetivo dentro de un controlador de clic aquí:

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

Answer 4

También puede utilizar el jQuery prop() método para esto.

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

Answer 5

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 sólo permite los siguientes argumentos, si se utiliza ese argumento en absoluto:

• _blank
• _media
• _parent
• _search
• _self
• _top

Check this Microsoft site

Answer 6

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

Answer 7

Esto no es una solución muy bonito, 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 vivo: http://jsfiddle.net/7eRLb/

Answer 8

Acabo de encontrar una solución interesante a este problema. Estaba creando tramos 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 lapso ... así que pensé por qué no hacer esto cuando creé el lapso.

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

luego me ató por controlador de clic al rango de medición, que crea un vínculo basado en el '-href datos' atributo:

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 permitió éxito que yo haga clic en un lapso y abrir una nueva ventana con una url adecuada.

Answer 9

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

Answer 10

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>