web-dev-qa-db-fra.com

ouvrir l'url dans un nouvel onglet ou réutiliser celui existant dans la mesure du possible

Maintenant j'ai un lien

<a href="blabla" target="_blank">link</a>

Cependant, cela ouvre toujours un nouvel onglet. Je veux l'effet suivant

  1. Si l'utilisateur a déjà un onglet avec la même URL, réutilisez cet onglet et actualisez-le si possible
  2. Sinon, ouvrez un nouvel onglet

Comment puis-je y parvenir en utilisant JavaScript?

Ce n'est pas grave s'il n'y a que quelques méthodes spécifiques au navigateur, donc les utilisateurs de navigateurs sans prise en charge correspondante "se replieront" sur la méthode du toujours nouvel onglet.

22
Xiao Jia

Vous pouvez définir le nom d'une fenêtre spécifique, afin d'ouvrir réutiliser l'onglet. Le problème est que, dans la mesure où le href sera le même, il ne sera pas rechargé. Vous ne pouvez donc pas obtenir facilement la partie refresh.

Ainsi, par exemple, vous pouvez avoir:

<a href="blabla" target="blabla">link</a>
<a href="foo" target="bar">link</a>

Dans JS, vous pouvez réellement obtenir la même chose, en utilisant window.open. Vous pouvez également utiliser l'URL comme target, afin que vous n'ayez pas besoin de spécifier manuellement:

<a href="blabla" onclick="window.open(this.href, this.href); return false">link</a>
<a href="foo" onclick="window.open(this.href, this.href); return false">link</a>

Vous pouvez également généraliser et ajouter un écouteur de clics au document, afin d'ouvrir certains liens de cette manière. Quelque chose comme:

<div id="container">
    <a href="blabla">link</a>
    <a href="foo">link</a>
</div>

<script>
    document.getElementById("container").onclick = function(evt){
        if (evt.target.tagName === "A")
            window.open(evt.target.href, evt.target.href);

        return false;
    }
</script>

Si la page se trouve sur le même domaine, à ce stade, vous pouvez également essayer de faire un rafraîchissement empirique de la page.

25
ZER0