Comment puis-je ouvrir un lien dans une nouvelle fenêtre?

Question

J'ai un gestionnaire de clic pour un lien spécifique, à l'intérieur que je veux faire quelque chose de semblable à ce qui suit:

window.location = url 

Je en ai besoin pour ouvrir réellement l'url dans une nouvelle fenêtre bien, comment puis-je faire ?

Answer 1

Vous pouvez aimer:

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

jQuery:

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

Vous pouvez également définir le target-_blank réellement.

Answer 2

vous devez utiliser window.open(url);

Références:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp

Answer 3

Voici comment forcer la cible à l'intérieur d'un gestionnaire de clic:

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

Answer 4

Vous pouvez également utiliser la jquery Prop() méthode pour cela.

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

Answer 5

Microsoft IE ne prend pas en charge un nom en tant que second argument.

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

Le problème est window name. Cela fonctionne:

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

Microsoft ne permet que les arguments suivants, si vous utilisez cet argument du tout:

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

Check this Microsoft site

Answer 6

Soyez conscient que si vous voulez exécuter des requêtes AJAX dans la fonction de gestionnaire d'événements pour l'événement click. Pour une raison quelconque, Chrome (et peut-être d'autres navigateurs) n'ouvrira pas un nouvel onglet/fenêtre.

Answer 7

Ce n'est pas une très belle solution, mais cela fonctionne:

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(); 
}); 

Un exemple concret: http://jsfiddle.net/7eRLb/

Answer 8

Je viens de trouver une solution intéressante à ce problème. Je créais des intervalles qui contiennent des informations basées sur le retour d'un service Web. J'ai pensé à essayer de mettre un lien autour de la portée de sorte que si je cliquais dessus, le "a" capturerait le clic.

Mais j'essayais de capturer le clic avec la durée ... alors j'ai pensé pourquoi ne pas le faire quand j'ai créé la durée.

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

Je lié alors un gestionnaire de clic pour la durée qui a créé un lien basé sur les «données href attribut:

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')); 
}); 

Cela m'a permis avec succès de cliquer sur une période et ouvrir une nouvelle fenêtre avec une URL correcte.

Answer 9

Qu'est-ce qui ne va pas avec <a href="myurl.html" target="_blank">My Link</a>? Aucun Javascript nécessaire ...

Answer 10

cette solution a également considéré le cas où l'URL est vide et a désactivé (en gris) le lien vide.

$(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>