JQuery – comment tester si le lien va à l'ancrage sur la même page?

J'essaie d'exécuter une fonction ajax lorsque les liens sont cliqués, mais je dois exclure les liens vers les ancres sur la même page, alors je n'essaye pas de recharger le contenu de la page lorsque je me déplace simplement vers un autre Une partie de la même page.

Je sais que je peux tester si le href comprend un hash mais ce n'est pas assez bon:

if (href.indexOf("#") === -1)

Parce que j'aurai des liens qui vont vers une autre page et que vous vous déplacez vers une ancre locale. Je dois donc tester si le href indique la page actuelle et comprend un hash. Et dans ce cas, je l'exclurai de la fonction. Mais si cela indique une page différente et comprend un hachage, il devrait toujours être inclus.

Comment puis-je réussir avec jQuery?

Vous n'avez pas besoin de jQuery pour cela. Utilisez simplement regex en version JavaScript.

 if(/^#/.test(href) === true) { /* do not run AJAX function */ } else { /* run the AJAX function */ }

Explication:

^# Est le regex. // est l'endroit où vous enveloppez votre regex. ^ Signifie au début de la chaîne et # est ce que vous recherchez. .test() est une fonction javascript qui exécute le regex sur une chaîne donnée et renvoie une valeur booléenne.

Lire: RegExp.prototype.test() – JavaScript | MDN

Mise à jour 1:

Dans le cas où le href ne commence pas par un # mais il indique toujours la même page Web, votre problème est réduit à vérifier si une chaîne est une sous-chaîne d'une autre chaîne . Vous pouvez utiliser window.location.href et .indexOf() pour obtenir ceci:

 if(href.indexOf(window.location.href) > -1) { /* do not run AJAX function */ } else { /* run the AJAX function */ }

window.location.href renvoie l'URL de la page Web sur laquelle vous êtes et href.indexOf(window.location.href) vérifie si window.location.href est une sous-chaîne de href ;

Exemple: https://www.example.com/page1 est une sous-chaîne de https://www.example.com/page1#myDiv

Lire:

Window.location – API Web | MDN
String.prototype.indexOf() – JavaScript | MDN

Mise à jour 2:

Bonne recherche par @Tib. Mon code dans la mise à jour ci-dessus ne vérifiait pas si les noms d'hôtes sont les mêmes. Je l'ai réparé ci-dessous:

 if(<hostnames are the same>) { // make use of window.location.hostname here to get hostname of current webpage if(href.indexOf(window.location.href) > -1) { /* do not run AJAX function */ } else { /* run the AJAX function */ } } else { /* do not run AJAX function */ }

Prise en charge dans tous les navigateurs:

 "use strict"; // Start of use strict $('a').bind('click', function(event) { if (this.pathname == window.location.pathname && this.protocol == window.location.protocol && this.host == window.location.host) { alert('links to same page'); event.preventDefault(); } else { alert('links to a different page'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#same-page">Same Page</a> <br> <a href="/users/913950#page">Other Page</a>

Loin de parfait, mais fonctionne pour moi. N'oubliez pas d'utiliser jQuery.

Amusez-vous avec cela:

 jQuery('a').on('click',function (e) { var current = window.location.href.split('#')[0]; var goto = jQuery(this).attr('href').split('#')[0]; if (current == goto && this.hash) { e.preventDefault(); var target = this.hash; var $target = jQuery(target); if($target.length){ jQuery('html,body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing'); } } }); jQuery('a[href^=#]:not([href=#])').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = jQuery(target); if($target.length){ history.pushState( null, jQuery('#title').html() , target); jQuery('html,body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing'); } }); jQuery('a[href=#]').on('click',function (e) { e.preventDefault(); history.pushState( null, jQuery('#title').html() , location.href.replace(location.hash,"")); jQuery('html,body').stop().animate({ 'scrollTop': 0 }, 900, 'swing'); });