Explication détaillée de la façon d'utiliser le hachage JS pour créer une application Web d'une seule page-js tutoriel-php.cn

Explication détaillée de la façon d'utiliser le hachage JS pour créer une application Web d'une seule page

不言

Libérer： 2018-05-05 16:23:20

original

1482 Les gens l'ont consulté

Cet article présente principalement la méthode détaillée d'utilisation du hachage JS pour créer une application Web d'une seule page. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

<.>Avant-propos

Cet article vous présente principalement le contenu pertinent sur l'utilisation du hachage JS pour créer des applications Web d'une seule page. Il est partagé pour votre référence et votre apprentissage. Je n'en dis pas beaucoup plus ci-dessous, rassemblons-nous. Jetons un coup d'œil à l'introduction détaillée.

1. Qu'est-ce que le hachage

Le hachage dont nous parlons ici (également appelé hachage) fait référence au hachage de l'objet de localisation dans Propriété JS, qui renvoie zéro ou plusieurs caractères suivis de # dans l'URL. Habituellement, nous pouvons obtenir la valeur de hachage ou définir la valeur de hachage via location.hash. Bien sûr, nous pouvons également définir la valeur de hachage en définissant l'attribut href de la balise a. Lorsque l'utilisateur clique sur la balise a, la valeur de hachage de la page peut être modifiée.

Par exemple :

/** JS方式 **/
location.hash = &#39;hash&#39;; //设置hash，该代码执行后URL后面增加“#hash”字符串
console.log(location.hash); //获取hash

Copier après la connexion

/** HTML方式 **/
<a href="#hash" rel="external nofollow" >点击改变hash</a> <!-- 点击后URL后面增加“#hash”字符串 -->

Copier après la connexion

Il convient de noter que quelle que soit la manière dont vous modifiez le hachage, la page ne sera pas actualisée.

2. À quoi sert le hachage

1. Définir le lien d'ancrage

Par la définition de liens d'ancrage (c'est-à-dire la méthode HTML mentionnée ci-dessus) peut faire glisser la page vers la position spécifiée en fonction de l'ID de l'élément après avoir cliqué sur le lien, même après le saut de page.

2. Mettre en œuvre la production d'applications d'une seule page

Les éléments correspondants peuvent être affichés ou masqués en fonction des changements dans les valeurs de hachage, réalisant ainsi une commutation d'une seule page sans rafraîchissement de la page.

3. Qu'est-ce qu'une application Web à page unique

Une application Web à page unique (SPA) est une application Web à page unique A. L'application de page est une application Web qui charge une seule page HTML et met à jour dynamiquement cette page lorsque l'utilisateur interagit avec l'application.

Ce qui précède est l'explication de l'application à page unique (SPA) donnée par l'Encyclopédie Baidu, et l'utilisation du hachage peut rendre très pratique le basculement entre les « pages ».

4. Comment utiliser le hachage pour créer un SPA

Pour faire simple, affichez uniquement la première page, puis modifiez le hachage valeur. Basculez pour afficher différentes pages et masquer la page précédente.

Écrivez une démo simple ici :

1. Écrivez d'abord la structure HTML

<article class="container">
 <section id="page1" class="page cur">第一页</section>
 <section id="page2" class="page">第二页</section>
 <section id="page3" class="page">第三页</section>
</article>
<nav id="nav" class="bottom-nav">
 <ul>
  <li>第一页</li>
  <li>第二页</li>
  <li>第三页</li>
 </ul>
</nav>

Copier après la connexion

2. Ensuite, définissez le style CSS

.page{ display: none; /* 其他样式省略 */}
.page.cur{ display: block;}
/* 其他样式省略 */

Copier après la connexion

3. Écrivez du Javascript pour obtenir un changement de page unique .

window.onload = function () {
 var nav = document.getElementById(&#39;nav&#39;);
 var navLi = nav.getElementsByTagName(&#39;li&#39;);
 for(var i = 0,len = navLi.length; i < len; i++){
  (function (i) { 
   navLi[i].onclick = function () { //点击nav中的li，改变hash值
    location.hash = &#39;page&#39; + (i+1);
   }
  })(i);
 }
 location.hash = &#39;page1&#39;; //每次页面重新加载时都回到page1
 window.onhashchange = function (e) { 
  //当hash变化时，执行hashchange事件，该事件具有oldURL和newURL两个事件属性，分别代表前一个URL和目前的URL
  var oldHash = e.oldURL.split(&#39;#&#39;)[1]; //取得前一个hash
  var newHash = e.newURL.split(&#39;#&#39;)[1]; //取得当前hash
  var oldPage = document.getElementById(oldHash);
  var newPage = document.getElementById(newHash);
  oldPage.classList.remove(&#39;cur&#39;); //隐藏前一个page
  newPage.classList.add(&#39;cur&#39;);  //显示当前page
 };
}

Copier après la connexion

Il y a quelques points à noter ici. IE n'est pas compatible avec les deux attributs oldURL et newURL, cette méthode a donc certaines limitations. Bien sûr, une meilleure façon consiste à stocker initialement la valeur de hachage dans une variable sous le nom oldHash. La méthode spécifique est la suivante :

/**** 前面代码省略 ****/
location.hash = &#39;page1&#39;;
var oldHash = location.hash;
window.onhashchange = function (e) {
 var newHash = location.hash;
 var oldPage = document.querySelector(oldHash);
 var newPage = document.querySelector(newHash);
 oldPage.classList.remove(&#39;cur&#39;);
 newPage.classList.add(&#39;cur&#39;);
 oldHash = newHash;
};

Copier après la connexion

Il existe une autre. place here Il convient de noter que classList n'est pas compatible avec les navigateurs IE9 et inférieurs. Il est préférable d'obtenir le même effet en traitant l'attribut className, qui ne sera pas décrit en détail ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!