Faire en sorte que les liens d'ancrage renvoient à la page actuelle lors de l'utilisation<base>

Question

Lorsque j'utilise la <base> pour définir une URL de base pour tous les liens relatifs sur une page, les liens d'ancrage renvoient également directement à l'URL de base. Existe-t-il un moyen de définir l'URL de base qui permettrait toujours aux liens d'ancrage de faire référence à la page actuellement ouverte ?

Par exemple, si j'ai une page à http://example.com/foo/ :

---

Comportement actuel :

 <base href="http://example.com/" />
<a href="bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/#baz" -->

Comportement souhaité :

 <base href="http://example.com/" />
<a href="bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/foo/#baz" -->

Answer 1

S'appuyant sur la réponse de @James Tomasino, celle-ci est légèrement plus efficace, résout un bogue avec des doubles hachages dans l'URL et une erreur de syntaxe.

 $(document).ready(function() {
    var pathname = window.location.href.split('#')[0];
    $('a[href^="#"]').each(function() {
        var $this = $(this),
            link = $this.attr('href');
        $this.attr('href', pathname + link);
    });
});

Answer 2

Un peu de jQuery pourrait probablement vous aider. Bien que la base href fonctionne comme vous le souhaitez, si vous souhaitez que vos liens commençant par une ancre (#) soient totalement relatifs, vous pouvez détourner tous les liens, vérifier la propriété href pour ceux commençant par # et les reconstruire en utilisant l'URL actuelle.

 $(document).ready(function () {
    var pathname = window.location.href;
    $('a').each(function () {
       var link = $(this).attr('href');
       if (link.substr(0,1) == "#") {
           $(this).attr('href', pathname + link);
       }
    });
}

Answer 3

Voici une version encore plus courte basée sur jQuery que j'utilise dans un environnement de production et qui fonctionne bien pour moi.

 $().ready(function() {
  $("a[href^='\#']").each(function(){ 
    this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
  });
});

Answer 4

Si vous utilisez PHP, vous pouvez utiliser la fonction suivante pour générer des liens d'ancrage :

 function generateAnchorLink($anchor) {
  $currentURL = "//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}";
  $escaped = htmlspecialchars($currentURL, ENT_QUOTES, 'UTF-8');
  return $escaped . '#' . $anchor;
}

Utilisez-le dans le code comme ça :

 <a href="<?php echo generateAnchorLink("baz"); ?>">baz</a>