ajouter/supprimer le nom de l'ancre de l'url actuelle sans rafraîchissement

Question

Je veux que l'événement de clic ajoute/supprime le nom de l'ancre "#on" à l'url courante sans recharger la page, ou utiliser le href='#on' des liens car cela fait sauter ma page

Eg : http://www.example.com/page.html#on afin que je puisse détecter les utilisateurs qui viennent de cette url. et appeler la On() fonction

function On()
{   
   //append to current url the anchor "#on"                 
}

function Off()
{   
  //remove from the current url the anchor "#on"                    
}

$('.on').live('click', function() {
  On();
  return false;    
}); 

$('.off').live('click', function() {
  Off();
  return false;    
});

Answer 1

Vous n'avez pas vraiment besoin de jQuery pour cela, vous pouvez obtenir/définir le nom de l'ancre en utilisant location.hash . Si vous le placez dans votre fonction jQuery ready, vous pouvez effectuer une action s'il est défini à une certaine valeur :

$(function(){
    // Remove the # from the hash, as different browsers may or may not include it
    var hash = location.hash.replace('#','');

    if(hash != ''){
        // Show the hash if it's set
        alert(hash);

        // Clear the hash in the URL
        location.hash = '';
    }
});

Notez que lorsque vous supprimez le hachage, la terminaison # pourrait rester dans la barre d'adresse. Si vous souhaitez répondre aux modifications en direct de l'ancre, vous pouvez lier une fonction de rappel à l'attribut hashchange événement :

$(document).bind("hashchange", function(){
    // Anchor has changed.
});

Si vous voulez éviter que votre page ne saute en haut de la page lorsque vous supprimez l'ancre, vous pouvez lier l'événement hashchange pour revenir à la position de défilement précédente. Regardez cet exemple : http://jsfiddle.net/yVf7V/

var lastPos = 0;

$('#on').click(function(){
    location.hash = 'blah';
});

$('#off').click(function(){
    lastPos = $(window).scrollTop();
    location.hash = '';
});

$(window).bind('hashchange',function(event){
    var hash = location.hash.replace('#','');
    if(hash == '') $(window).scrollTop(lastPos);
    alert(hash);
});

Answer 2

Si vous utilisez jquery, essayez ce code

$("a[href^=#]").on("click", function(e) {
    e.preventDefault();
    history.pushState({}, "", this.href);
});

Answer 3

Appel à history.pushState({}, "", link) est similaire au réglage window.location = "#foo" En effet, les deux créeront et activeront également une autre entrée d'historique associée au document actuel.

Note que pushState() ne provoque jamais un échange de hachage est déclenché, même si la nouvelle URL ne diffère de l'ancienne que par son hachage.

const url = new URL(window.location);
url.hash = '#foo';
window.history.pushState({}, '', url);

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState#examples

https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event

Answer 4

Est-ce que c'est ce que vous recherchez ?

déménagement

var url="htt"//www.test.com/#on"

var pos= url.indexOf("#on");

var finalUrl= url.Substring(0,pos-1);

ajout de

var url="htt"//www.test.com/"

url=url+"/on"