Comment ouvrir un lien dans une nouvelle fenêtre?

94

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

window.location = url

J'en ai besoin pour ouvrir l'URL dans une nouvelle fenêtre, comment faire?

Chris
la source

Réponses:

204

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 targetsur en _blankfait.

Sarfraz
la source
mais ce code jquery ne naviguera pas automatiquement vers la cible
Amr Elgarhy
26
_blank est la cible par défaut, donc utiliser window.open (url) devrait suffire
themerlinproject
Je ne suis pas sûr d'aider et pas exactement le même problème, mais je cherchais la même solution pour télécharger un fichier (pas à partir d'un lien mais d'un bouton) et sur Chrome, la fenêtre ne s'est pas ouverte et aucun téléchargement jusqu'à ce que je passe simplement à window.location = 'url' qui ne change pas d'emplacement mais télécharge le fichier ...
gdoumenc
window.open (url) is fine :)
fudu
33

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

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});
tchadwackerman
la source
5
Pas besoin d'utiliser le sélecteur jQuery dans le gestionnaire de clics afin que la ligne $(this).attr('target', '_blank'); puisse être changée en this.target = "_blank";Aussi, si les liens d'ancrage sur la page peuvent être modifiés pour avoir des rel="external"attributs, vous pouvez créer un gestionnaire de clics global pour la page avec le sélecteur jQuery a[rel="external"]plutôt que d'avoir un gestionnaire de clics par lien sélectionné aveca#link_id
himanshu
17

vous devrez 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

Amr Elgarhy
la source
5
Yikes! N'utilisez pas ou ne créez pas de lien vers w3schools, il n'est PAS associé au W3C. Utilisez plutôt MDN: developer.mozilla.org/en-US/docs/Web/API/Window.open
AB Carroll
5
w3schools est bon (ignorez les `` quelques '' trolls du w3c) ... continuera à être une source faisant autorité ... même le w3c le soutient à nouveau ;-)
Dawesi
4

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

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

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

Mais j'essayais de capturer le clic avec le span ... alors j'ai pensé pourquoi ne pas le faire lorsque j'ai créé le span.

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

J'ai ensuite lié un gestionnaire de clics à la plage qui a créé un lien basé sur l'attribut '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'));
});

Cela m'a permis de cliquer sur une plage et d'ouvrir une nouvelle fenêtre avec une URL appropriée.

Dramoth
la source
1

Quel est le problème avec <a href="myurl.html" target="_blank">My Link</a>? Aucun Javascript nécessaire ...

Michaja Broertjes
la source
1

cette solution a également considéré le cas où l'url est vide et désactivé (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>

Scott 混合 理论
la source
0

Soyez conscient si vous souhaitez 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 de nouvel onglet / fenêtre.

user2618825
la source
0

Ce n'est pas une très bonne 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();
});

Exemple en direct: http://jsfiddle.net/7eRLb/

adriandorine
la source
0

Microsoft IE ne prend pas en charge un nom comme deuxième argument.

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

Le problème est window name. Cela fonctionnera:

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

Microsoft autorise uniquement les arguments suivants, si vous utilisez cet argument du tout:

  • _Vide
  • _médias
  • _parent
  • _chercher
  • _soi
  • _Haut

Consultez ce site Microsoft

dhanesh sr
la source
4
-1: Votre copier / coller de violation de licence depuis stackoverflow.com/a/1462500/560648 nonobstant, ce n'est pas vrai. L'argument est pris en charge . Il ne peut tout simplement pas contenir d'espaces, de tirets ou d'autres signes de ponctuation. Lisez d'autres réponses et commentaires sur cette question.
Courses de légèreté en orbite le