Mit der History-API von JavaScript können Suchmaschinen AJAX-Content_Javascript-Tipps crawlen-js-Tutorial-php.cn

Mit der History-API von JavaScript können Suchmaschinen AJAX-Content_Javascript-Tipps crawlen

WBOY

Freigeben： 2016-05-16 15:27:31

Original

1328 Leute haben es durchsucht

Ist Ihnen beim Durchsuchen des Facebook-Fotoalbums aufgefallen, dass sich bei teilweiser Aktualisierung der Seite auch die Adresse in der Adressleiste ändert, und zwar nicht in einer Hash-Methode? Es verwendet mehrere neue APIs des HTML5-Verlaufs. Als globale Variable von Fenster ist der Verlauf im Zeitalter von HTML4 nichts Neues. Die, die wir häufig verwenden, sind History.back() und History.go().

Ich dachte immer, es gäbe keine Möglichkeit, das zu schaffen, bis ich vor zwei Tagen die Lösung von Robin Ward, einem der Gründer von Discourse, sah, und ich konnte nicht anders, als erstaunt zu sein.

Discourse ist ein Forenprogramm, das stark auf Ajax basiert, aber es muss Google ermöglichen, den Inhalt einzubinden. Die Lösung besteht darin, die Nummernzeichenstruktur aufzugeben und die History-API zu übernehmen.

Die sogenannte History-API bezieht sich auf die Änderung der in der Adressleiste des Browsers angezeigten URL, ohne die Seite zu aktualisieren (genauer gesagt ändert sie den aktuellen Status der Webseite). Hier ist ein Beispiel, bei dem Sie auf die Schaltfläche oben klicken, um mit der Musikwiedergabe zu beginnen. Klicken Sie dann erneut auf den Link unten und sehen Sie, was passiert?

Die URL in der Adressleiste hat sich geändert, aber die Musikwiedergabe wird nicht unterbrochen!

Eine detaillierte Einführung in die History-API würde den Rahmen dieses Artikels sprengen. Einfach ausgedrückt besteht seine Funktion darin, einen Datensatz zum Verlaufsobjekt des Browsers hinzuzufügen.

Code kopieren Der Code lautet wie folgt:

window.history.pushState(state object, title, url);　

Mit der obigen Befehlszeile kann eine neue URL in der Adressleiste angezeigt werden. Die pushState-Methode des History-Objekts akzeptiert drei Parameter. Die neue URL ist der dritte Parameter. Die ersten beiden Parameter können null sein.

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

Derzeit unterstützen alle gängigen Browser diese Methode: Chrome (26.0), Firefox (20.0), IE (10.0), Safari (5.1), Opera (12.1).

Hier ist Robin Wards Methode.

Verwenden Sie zunächst die History-API, um die Hash-Markierungsstruktur zu ersetzen, sodass jede Hash-Markierung zu einer URL mit einem normalen Pfad wird, sodass Suchmaschinen jede Webseite crawlen.

Example.com/1

example.com/2
　example.com/3　

Dann definieren Sie eine JavaScript-Funktion, um den Ajax-Teil zu verarbeiten und den Inhalt basierend auf der URL zu crawlen (vorausgesetzt, jQuery wird verwendet).

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

Nach dem Login kopieren

Definieren Sie das Klickereignis der Maus neu.

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

Nach dem Login kopieren

Berücksichtigen Sie auch, dass der Benutzer auf die „Vorwärts/Zurück“-Schaltflächen des Browsers klickt. Zu diesem Zeitpunkt wird das Popstate-Ereignis des History-Objekts ausgelöst.

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

Nach dem Login kopieren

Nachdem Sie die oben genannten drei Codeteile definiert haben, können Sie die normale Pfad-URL und den AJAX-Inhalt anzeigen, ohne die Seite zu aktualisieren.

Zuletzt richten Sie die Serverseite ein.

Da die Nummernzeichenstruktur nicht verwendet wird, ist jede URL eine andere Anfrage. Daher muss der Server für alle diese Anfragen Webseiten mit der folgenden Struktur zurückgeben, um 404-Fehler zu verhindern.

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

Nach dem Login kopieren

Schauen Sie sich den obigen Code genau an, Sie werden ein Noscript-Tag finden, das ist das Geheimnis.

Wir fügen alle Inhalte, die Suchmaschinen einschließen sollen, in Noscript-Tags ein. In diesem Fall können Benutzer immer noch AJAX-Vorgänge ausführen, ohne die Seite zu aktualisieren, aber Suchmaschinen beziehen den Hauptinhalt jeder Webseite ein!