web-dev-qa-db-fra.com

JavaScript / jQuery - Ouvrir le lien actuel dans la fenêtre pop-up

<a href="http://google.com">Link</a>

Comment puis-je ouvrir ce lien dans une fenêtre pop-up? Et empêcher le navigateur de le bloquer

javascriptjquerypopup
20
Alex

Il y a des "nouvelles fenêtres" et des "popups". L'utilisation de target=_blank S'ouvrira dans une nouvelle fenêtre, sauf que les navigateurs modernes placent de nouvelles fenêtres dans de nouveaux onglets par défaut. Ce qui semble ne pas être ce que vous voulez.

Pour une fenêtre contextuelle réelle, vous voulez window.open(), et assurez-vous d'inclure une largeur et une hauteur spécifiques, sinon certains navigateurs placeront toujours la nouvelle fenêtre dans un nouvel onglet. L'exemple de Darin me semble bien.

En ce qui concerne le blocage des popups, l'approche générale adoptée par les navigateurs est que les popups initiés par action de l'utilisateur sont autorisés (tels que les clics), tandis que les popups lancés spontanément via un script, comme celui-ci, sont bloqués:

<script type="text/javascript">
    window.open("http://www.google.com/", "Google", "width=500,height=500");
</script>

Cependant, le blocage des publicités étant une guerre qui s'intensifie, vous ne pouvez jamais être sûr qu'une fenêtre s'ouvrira. Si votre popup est bloqué, l'appel window.open renvoie null. Je modifierais donc l'exemple de Daren comme ceci:

<a href="http://www.google.com/"
    onclick="return !window.open(this.href, 'Google', 'width=500,height=500')"
    target="_blank">

Si la fenêtre contextuelle est bloquée, onclick renvoie true, qui suit le lien sur lequel ils ont cliqué en l'ouvrant dans une nouvelle fenêtre ou un nouvel onglet. C'est un repli, donc au moins le contenu est accessible (sinon joli).

64
jpsimons
<a href="http://google.com" onclick="window.open(this.href, 'windowName', 'width=1000, height=700, left=24, top=24, scrollbars, resizable'); return false;">Link</a>
9
Darin Dimitrov

Cela ouvrira une nouvelle fenêtre.

<a href="http://google.com" target="_blank">Link</a>
2
Codler

jQuery:

<script>
$('#button2').live("click",function(e){    
  window.open("http://www.google.com", "yyyyy", "width=480,height=360,resizable=no,toolbar=no,menubar=no,location=no,status=no");
return false;
});
</script>

<a href="#" id="button2" ><img src="images/online.png"></a><br/>Online
1
YumYumYum