JavaScript の History API により、検索エンジンが AJAX をクロールできるようになります。-jsチュートリアル-php.cn

JavaScript の History API により、検索エンジンが AJAX をクロールできるようになります。

WBOY

リリース： 2016-05-16 15:27:31

オリジナル

1311 人が閲覧しました

Facebook フォトアルバムを閲覧しているときに、ページが部分的に更新されると、アドレスバーのアドレスも変更され、ハッシュ方式ではないことに気づきましたか。ウィンドウのグローバル変数として、HTML5 履歴のいくつかの新しい API を使用します。HTML4 の時代では、履歴は新しいものではありません。私たちがよく使うのは、history.back() とhistory.go() です。

私は、2 日前に Discourse の創設者の 1 人である Robin Ward 氏の解決策を目にするまで、それを行う方法はないと常に考えていました。そして、私は驚かずにはいられませんでした。

Discourse は Ajax に大きく依存するフォーラムプログラムですが、Google がコンテンツを含めることを許可する必要があります。その解決策は、ポンド記号の構造を放棄し、History API を採用することです。

いわゆる History API とは、ページを更新せずにブラウザのアドレスバーに表示される URL を変更することを指します (正確には、Web ページの現在のステータスを変更します)。ここでは、上のボタンをクリックして音楽の再生を開始する例を示します。次に、下のリンクをもう一度クリックして、何が起こるか見てみましょう。

アドレスバーの URL が変更されましたが、音楽の再生は中断されません。

History API の詳細な紹介は、この記事の範囲外です。簡単に言うと、その機能はブラウザの History オブジェクトにレコードを追加することです。

コードをコピーしますコードは次のとおりです:

window.history.pushState(状態オブジェクト, タイトル, URL);

上記のコマンド行により、アドレスバーに新しい URL が表示されます。 History オブジェクトの PushState メソッドは 3 つのパラメータを受け取ります。最初の 2 つのパラメータは null にすることができます。

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

現在、すべての主要なブラウザーがこの方法をサポートしています: Chrome (26.0)、Firefox (20.0)、IE (10.0)、Safari (5.1)、Opera (12.1)。

これがロビン・ウォードのメソッドです。

まず、History API を使用してハッシュマーク構造を置き換え、各ハッシュマークが通常のパスを持つ URL になり、検索エンジンがすべての Web ページをクロールできるようにします。

Example.com/1
example.com/2
example.com/3

次に、Ajax 部分を処理し、URL に基づいてコンテンツをクロールする JavaScript 関数を定義します (jQuery が使用されていると仮定します)。

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

ログイン後にコピー

マウスのクリックイベントを再定義します。

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

ログイン後にコピー

ユーザーがブラウザの「進む/戻る」ボタンをクリックすることも考慮に入れてください。このとき、History オブジェクトの Popstate イベントがトリガーされます。

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

ログイン後にコピー

上記の 3 つのコードを定義すると、ページを更新せずに通常のパス URL と AJAX コンテンツを表示できます。

最後にサーバー側の設定を行います。

ポンド記号構造が使用されていないため、各 URL は異なるリクエストになります。したがって、サーバーは、404 エラーを防ぐために、これらすべてのリクエストに対して次の構造を持つ Web ページを返す必要があります。

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

ログイン後にコピー

上記のコードを注意深く見てください。noscript タグが見つかります。これが秘密です。

検索エンジンに含めてほしいすべてのコンテンツを noscript タグに入れます。この場合、ユーザーはページを更新しなくても AJAX 操作を実行できますが、検索エンジンには各 Web ページのメインコンテンツが含まれることになります。