javascript - Comment NetEase Cloud Music se rend-il compte que la balise a href a une valeur et ne saute pas ?

Question

Par exemple, cette page http://music.163.com/#/song?i...
Cliquez sur le titre de la chanson ci-dessous, et la page ne s'actualisera pas et ne sautera pas. Comment y parvenir ?

Answer 1

http://music.163.com/#/song?i... La chose après le numéro
# est appelée un fragment, ou elle peut aussi être appelée un point d'ancrage. Cette chose ne rafraîchira pas le navigateur et ne soumettra pas de requête au serveur, mais elle peut générer un enregistrement de navigateur.
Obtenir la valeur après le numéro # est window.location.hash
Il vous suffit donc de surveiller le changement de cette valeur de hachage surhashchange

Answer 2

window.location.hash

Answer 3

iframe

Answer 4

Je suppose que vous êtes un débutant... Voir plus de code source

_onAnchorClick = function(_event){//截获所有<a>标签的点击事件，自定义页面的跳转
    _event = _event||window.event;
    var _el = _event.target||_event.srcElement,
    _base = location.protocol+'//'+location.host;
    
    while(_el&&_el!=document){
        // ...
    }

}

_addEvent(document,'click',_onAnchorClick);

---

En fait, je viens d'utiliser Event.preventDefault

  <a href="https://baidu.com">我想跳转到百度搜索哆啦A梦</a>


  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <script>
    
    $('a').on('click', function (event) {
      event.preventDefault();
    })
  
  </script>

Answer 5

La page n'est en fait pas actualisée. Vous connaissez "#target", qui peut diriger votre page vers l'emplacement cible. De plus, vous pouvez en apprendre davantage sur le hachage js (mentionné ci-dessus) et le routage

.