L'API d'historique de JavaScript permet aux moteurs de recherche d'explorer les astuces content

L'API d'historique de JavaScript permet aux moteurs de recherche d'explorer les astuces content_javascript d'AJAX

WBOY

Libérer： 2016-05-16 15:27:31

original

1326 Les gens l'ont consulté

Avez-vous remarqué en parcourant l'album photo Facebook que lorsque la page est partiellement rafraîchie, l'adresse dans la barre d'adresse change également, et ce n'est pas dans une méthode de hachage. Il utilise plusieurs nouvelles API de l'historique HTML5. En tant que variable globale de fenêtre, l'historique n'a rien de nouveau à l'ère du HTML4. Ceux que nous utilisons souvent sont history.back() et history.go().

J'ai toujours pensé qu'il n'y avait aucun moyen de le faire, jusqu'à ce que je voie la solution de Robin Ward, l'un des fondateurs de Discourse, il y a deux jours, et je n'ai pas pu m'empêcher d'être étonné.

Discourse est un programme de forum qui s'appuie fortement sur Ajax, mais il doit permettre à Google d'inclure le contenu. Sa solution consiste à abandonner la structure du signe dièse et à adopter l'API History.

L'API dite d'historique fait référence à la modification de l'URL affichée dans la barre d'adresse du navigateur sans actualiser la page (pour être précis, elle modifie l'état actuel de la page Web). Voici un exemple où vous cliquez sur le bouton ci-dessus pour commencer à jouer de la musique. Ensuite, cliquez à nouveau sur le lien ci-dessous et voyez ce qui se passe ?

L'URL dans la barre d'adresse a changé, mais la lecture de la musique n'est pas interrompue !

Une introduction détaillée à l’API History dépasse le cadre de cet article. En termes simples, sa fonction est d'ajouter un enregistrement à l'objet Historique du navigateur.

Copier le code Le code est le suivant :

window.history.pushState (objet d'état, titre, url);　

La ligne de commande ci-dessus peut faire apparaître une nouvelle URL dans la barre d'adresse. La méthode pushState de l'objet History accepte trois paramètres. La nouvelle URL est le troisième paramètre. Les deux premiers paramètres peuvent être nuls.

window.history.pushState(null, null, newURL);

Actuellement, tous les principaux navigateurs prennent en charge cette méthode : Chrome (26.0), Firefox (20.0), IE (10.0), Safari (5.1), Opera (12.1).

Voici la méthode de Robin Ward.

Tout d'abord, utilisez l'API History pour remplacer la structure des marques de hachage, afin que chaque marque de hachage devienne une URL avec un chemin normal, afin que les moteurs de recherche explorent chaque page Web.

Exemple.com/1

exemple.com/2
　exemple.com/3　

Ensuite, définissez une fonction JavaScript pour gérer la partie Ajax et explorez le contenu en fonction de l'URL (en supposant que jQuery soit utilisé).

　function anchorClick(link) {
 　　　　var linkSplit = link.split('/').pop();
 　　　　$.get('api/' + linkSplit, function(data) {
 　　　　　　$('#content').html(data);
 　　　　});
 　　}

Copier après la connexion

Redéfinissez l'événement clic de la souris.

　　$('#container').on('click', 'a', function(e) {
 　　　　window.history.pushState(null, null, $(this).attr('href'));
 　　　　anchorClick($(this).attr('href'));
 　　　　e.preventDefault();
 　　});

Copier après la connexion

Prenez également en compte l'utilisateur qui clique sur les boutons "suivant/précédent" du navigateur. A ce moment, l'événement popstate de l'objet History sera déclenché.

　window.addEventListener('popstate', function(e) {  
 　　　　anchorClick(location.pathname); 
 　　});

Copier après la connexion

Après avoir défini les trois morceaux de code ci-dessus, vous pouvez afficher l'URL du chemin normal et le contenu AJAX sans actualiser la page.

Enfin, configurez le côté serveur.

Étant donné que la structure du signe dièse n'est pas utilisée, chaque URL est une requête différente. Par conséquent, le serveur doit renvoyer des pages Web avec la structure suivante pour toutes ces requêtes afin d'éviter les erreurs 404.

　 <html>
 　　　　<body>
 　　　　　　<section id='container'></section>
 　　　　　　<noscript>
 　　　　　　　　... ...
 　　　　　　</noscript>
 　　　　</body>
 　　</html>

Copier après la connexion

Regardez bien le code ci-dessus, vous y trouverez une balise noscript, c'est le secret.

Nous mettons tout le contenu que nous souhaitons que les moteurs de recherche incluent dans les balises noscript. Dans ce cas, les utilisateurs peuvent toujours effectuer des opérations AJAX sans actualiser la page, mais les moteurs de recherche incluront le contenu principal de chaque page Web !