L'API d'historique HTML5 implémente les compétences du didacticiel jump_html5 sans actualisation-Tutoriel H5-php.cn

L'API d'historique HTML5 implémente les compétences du didacticiel jump_html5 sans actualisation

WBOY

Libérer： 2016-05-16 15:46:10

original

2269 Les gens l'ont consulté

Une fois, alors que je surfais sur Internet, j'ai trouvé que les effets d'animation de connexion et d'inscription étaient très magnifiques, mais ce qui m'a choqué c'est que la page pouvait sauter sans rafraîchir (elle a été révisée, vous pouvez cliquer ici pour voir cet effet : GitHub ou FM), j'ai révisé les connaissances front-end que j'avais acquises, et il semblait qu'aucune technologie ne pouvait y parvenir. J'ai donc cherché sur Baidu et découvert que cela avait été réalisé à l'origine en utilisant l'API History en HTML5, mais il n'a jamais été utilisé. Il a fallu attendre la révision du blog pour que cette technologie soit appliquée.
En HTML5,
1 Ajout de la possibilité d'ajouter des éléments dans l'historique du navigateur via JS.
2. Affichez et modifiez l'URL dans la barre d'adresse du navigateur sans actualiser la page.
3. Ajout d'un événement déclenché lorsque l'utilisateur clique sur le bouton de retour du navigateur.
Grâce aux trois points ci-dessus, vous pouvez modifier dynamiquement l'URL dans la barre d'adresse du navigateur et afficher dynamiquement le contenu de la page sans actualiser la page.
Par exemple : Lorsque le contenu de la page A et de la page B est différent, avant HTML5, si vous passez de la page A à la page B, vous devez passer de la page A à la page B dans le navigateur, ou en d'autres termes, si vous en avez besoin Si vous souhaitez utiliser la fonction du bouton retour, vous pouvez ajouter #XXXX à l'adresse URL pour obtenir la fonction retour. Alors maintenant en HTML5, vous pouvez implémenter le traitement suivant via l'API History :
1. Demandez les données B dans la page en envoyant une requête AJAX sur la page A.
2. Chargez les informations correspondantes à l'emplacement correspondant via JS dans la page A.
3. Utilisez l'API History pour passer de l'adresse URL de la page A à l'adresse URL de la page B dans la barre d'adresse du navigateur sans actualiser la page.
API d'historique en HTML4
Attributs
1.length Le nombre d'éléments d'historique. L'historique que JavaScript peut gérer est limité à la plage accessible à l'aide des touches « avant » et « arrière » du navigateur. Cet attribut renvoie la somme des adresses contenues sous les boutons « avant » et « arrière ».
Méthodes
1.back() Retour, ce qui équivaut à appuyer sur la touche "Retour".
2.forward() forward, ce qui équivaut à appuyer sur la touche "forward".
3.go() Utilisation : history.go(x); Accédez à une adresse spécifiée dans la plage de l'historique. Si x < 0, revenez en arrière sur x adresses, si x > 0, avancez sur x adresses et si x == 0, actualisez la page Web maintenant ouverte. history.go(0) est équivalent à location.reload().
API d'historique en HTML5
1. history.pushState(data, title [, url]) : ajouter un enregistrement en haut de la pile de données d'historique ; be in Lorsque l'événement onpopstate est déclenché, il est passé en paramètre ; le titre est le titre de la page, et tous les navigateurs actuels ignoreront ce paramètre ; l'url est l'adresse de la page, facultatif, et la valeur par défaut est l'adresse de la page actuelle.
2. history.replaceState(data, title [, url]) : modifiez l'enregistrement de l'historique actuel, les paramètres sont les mêmes que ci-dessus.
3. history.state : utilisé pour stocker les données de la méthode ci-dessus. Différents navigateurs ont des autorisations de lecture et d'écriture différentes.
4. Événement popstate : cet événement est déclenché lorsque l'utilisateur clique sur le bouton Précédent ou Suivant du navigateur. Dans la fonction de traitement des événements, lisez la valeur de l'attribut d'état de l'objet événement qui a déclenché l'événement. Cette valeur d'attribut est la première valeur de paramètre utilisée lors de l'exécution de la méthode pushState, qui stocke la valeur enregistrée de manière synchrone lors de l'ajout d'un enregistrement à l'historique du navigateur. objet.
Jusqu'à présent, les navigateurs IE10, Firefox4 et supérieur, Chrome8 et supérieur, Safari5, Opera11 et supérieur prennent en charge l'API History en HTML5.
HTML :

Copier le code

Le code est le suivant :

Nouveau document

测试

测试

测试

JS :

复制代码

代码如下 :

/**
* Historique HTML et ajax
*/
$(function(){
var ajax,
currentState;
$('.container li').unbind ().bind('click',function(e){
e.preventDefault();
var target = e.target,
url = $(target).attr('href');
!$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");
if(ajax == undefined) {
currentState = {
url : document.location.href,
titre : document.title,
html : $('.content').html()
}; }
ajax = $.ajax({
type:'POST',
url: url,
dataType:'json',
succès: function(data){
var html = '';
if(data.length > ) {
for(var i = , ilist = data.length; i < ilist; i ) {
html = '

' data[i].age '

'
'

' data[i].name '

'
'

' sexe '

';
}
$('.content').html(html);
}
var state = {
url: url,
titre : document.titre,
html : $('.content').html()
}
history.pushState(state,null,url);
}
});
});
window.addEventListener('popstate',function(event){
if(ajax == null){
return;
}else if(event && event.state){
document .title = event.state.title;
$('.content').html(event.state.html);
}else{
document.title = currentState.title
$ ('.content').html(currentState.html);
}
});
});