JavaScriptの履歴APIへの簡単な紹介

履歴APIは、すべてのweb開発者が寒さを知っておく必要があるJavaScriptのテクニックの一つです。 それがなければ、戻るボタンを1回クリックすると、アプリケーションからまっすぐにジャンプします。 進行中の作業は失われ、ユーザーは最初からやり直すことを余儀なくされます。幸いなことに、簡単な解決策があります。

HTML5の正式化（およびInternet Explorer10のリリース）以来、履歴リストに追加して前後のナビゲーションに反応できる履歴APIがありました。 この記事では、それがどのように動作するかを学びます—そして、あなたはライブの例でそれを試してみます。しかし、先に行く前に、のは、問題を詳しく見てみましょう。

しかし、この問題を見てみましょう。

ウェブの昔、webページは一つのことをしました—表示のもの。 あなたが何か他のものを見たいときは、リンクをクリックして、新しいURLに行きました。

JavaScriptがより強力になるにつれて、開発者はすべてのwebページが独自の権利で完全なアプリケーションであることに気付きました。 Webページは、デスクトップアプリケーションに匹敵する可能性があります！ 問題は、ブラウザの戻るボタンと進むボタンがこの新しいアプリケーションモデルに適合しないことでした。 たとえば、ユーザーは単一ページのwebアプリケーションで一連のタスクを実行し、戻るボタンを使用して単一のステップに戻ることを期待できます。 代わりに、戻るボタンは前のwebページに戻り、JavaScriptアプリが何をしていたかの途中で効果的にシャットダウンします。

多くの場合、この動作は直感的ではありませんでした。 たとえば、XMLHttpRequestオブジェクトを使用して新しいデータを取得し、ページを更新するアプリケーションを考えてみましょう。 ユーザーにとっては、新しいページに移動しているように見えるかもしれません。 しかし、彼らは戻るボタンを使用してのミスを犯す場合は、錯覚が粉々になり、すべてが横になります。/div>….. ここでは、迷信や神話からの奇妙な獣を記述した1818年の有名な（そして現在はパブリックドメインの）本であるDictionnaire Infernalをステップ実行できる例があります。 トリックは前および次のリンクが別のページに連れて行かないことである。 代わりに、次のスライドの情報を取得するXMLHttpRequestを介して非同期呼び出しをトリガーします。 次に、JavaScriptコードは、ページの残りの部分のコンテンツを乱すことなく、スライドボックスを更新します。

ここでは、History APIサポートを備えたライブバージョンの例を示します。 すべてが単一のwebページで行われますが、転送ボタンと戻るボタンを使用して、ある画像から次の画像にシームレスにステップすることができます。 あなたも、リロードボタン（ではなく、アプリ全体を再起動するよりも、現在のスライドをリロード）を使用することができ、あなたは現在の状態を維持するブ

そして、History APIを使用していない古い学校のバージョンの例を次に示します。 それはあなたがサイドショーにあるどのくらい問題ではありません—あなたは戻るボタンを使用すると、前のwebページに戻ってジャンプします。 前方ボタンとリロードボタンも同様に壊れています。 ブックマークは、最初からアプリを再起動します。

ここですべてのソースコードをダウンロードして遊ぶことができます。 （ただし、web要求を行うためにXMLHttpRequestオブジェクトを使用するため、ローカルでは機能しません。）この記事の残りの部分では、私はすべてがどのように動作するかを分解します。

例の準備

History APIに入る前に、この例がどのように機能するかについての基本的な理解を持っていることが重要です。 それはすべて非常に簡単です。

ページは、現在表示されているスライドを追跡するために番号を使用します。 [次へ]または[前へ]をクリックすると、コードによって現在のスライド番号が変更されます。 次に、独自のgoToSlide()関数を使用してページを更新します。

goToSlide()XMLHttpRequestオブジェクトを使用して非同期要求を開始します。

スライドコンテンツの生成方法を決定し、ページ内の呼び出し元のコードに送り返すのはあなた次第です。 通常、適切なサーバー側のコードをトリガーするルーティングフレームワークがあります。 そのサーバー側のコードは、キャッシュ、データベース、ファイル、またはハードコードされたマークアップのブロックからスライドコンテンツを取得できます。この例では、私は物事をできるだけ単純にしてきました。 要求は、静的ファイルからHTMLマークアップを取得します。 したがって、3番目のスライド（Slides/3のような相対URL）を要求している場合は、そのスライドだけのHTMLマークアップのスニペットが表示されます。 落ち着け！

要求が終了すると、ブラウザはnewSlideReceived()<div>を使用して、受信したマークアップを取得してページに挿入するだけです。ブラウザの履歴をサポートしていないこのページのナイーブなバージョンを構築するために知っておく必要があるのはそれだけです。

履歴オブジェクト

historyオブジェクトは、JavaScriptの黎明期からほとんど存在していました。 しかし、その人生の多くのために、それは今日よりもはるかに強力ではありませんでした（そしてはるかに有用ではありませんでした）。p>

元のhistorylengthであり、ブラウザの履歴リストにあるエントリの数を示します。

alert("You have " + history.length + " pages in the history.");

この詳細はほとんど役に立たない。

三つの元のhistoryback()forward()go()（ブラウザに前方または後方に移動する手順）。 あなたは、webページ上で独自のカスタムバックとフォワードボタンを設計したい場合を除き、このすべては、比較的少ないまで追加されます。HistoryAPIには、pushState()onPopStateイベントという、より便利な要素が追加されています。

履歴リストにエントリを追加する

pushState()メソッドは、履歴APIの中心です。 現在のページの履歴リストに新しい項目を追加できます。 これは次のようになります。

この時点で、あなたは疑問に思うかもしれません—同じページに複数のエントリを持つことのポイントは何ですか？ トリックは、各エントリにいくつかの状態が添付されていることです—あなたが設定した情報またはオブジェクトのリンクされた部分。 ユーザーが履歴リストをステップバックすると、対応する状態情報が取得されるため、ページを以前のバージョンに戻すことができます。

pushState()メソッドは三つの引数を取ります。

• データ。 最初の引数は、このページの現在の状態を表すために保存するデータの任意の部分です。 この情報を使用して、ユーザーが履歴リストに戻ったときにページを復元します。
• タイトル。 2番目の引数は、ブラウザに表示させるページタイトルです。 現在、すべてのブラウザがこの詳細を無視して統一されています。 （したがって、nullを渡すことができます。)
• URL. 3番目の引数は、ブラウザのアドレスバーにページに表示する新しいバージョンのURLです。 これにより、リロードボタンとブラウザのブックマークのサポートが強化されます。

Dictionnaire Infernal slideshowの例では、履歴のサポートを追加するのは簡単ですあなたが追跡する必要があるのはスライド番号です。 スライドが変更されるたびに履歴リストに追加します。p>

追加する必要があるコード行は次のとおりです。

history.pushState(slideNumber, null, null);

このコードは、2番目の引数でページタイトルを変更せず（とにかく動作しないため）、URLを変更しないことに気付くでしょう（すぐにそれを行う方法がわかります）。 それはスライド番号を保存するだけです。完全な画像については、次のリンクと前のリンクのイベントハンドラであるhistory.pushState()への2つの呼び出しが適切な場所にあります:

前のページに戻る

pushState()onPopStatepushState()onPopStateイベントは、ユーザーが戻ったときにそれを処

これがどのように機能するかを理解するために、訪問者がDictionnaire Infernalの例のすべてのスライドをステップスルーした場合に何が起こるかを検討してくださ 新しいスライドが読み込まれるたびに、ページに履歴エントリが追加されます。 しかし、ユーザーが戻るボタンで戻っても、何も起こりません。この欠点を修正するには、すべての履歴ナビゲーションの後にトリガーされるonPopStatehistory.back()のような履歴メソッドのいずれかを使用する場合や、ユーザーがブラウザのナビゲーションボタンをクリックした場合が含まれます。p>

onPopStatepushState()stateプロパティから取得できます。

var slideNumber = e.State;

あなたの仕事は、状態情報を使用してページの適切なバージョンを復元することです。 現在の例では、すべてのスライドナビゲーションを処理する便利なgoToSlide()関数を呼び出して、対応するスライドをロードすることを意味します。 完全なコードは短く簡単です:

e.Statenullであるかどうかを確認する必要があることに注意してください。

URLの変更

この例の現在のバージョンは履歴リストをサポートしていますが、リロードボタンではうまく再生されません。 たとえば、3番目のスライドをクリックしてページを更新すると、最初に戻ってきます。 あなたはスライドのいずれかをブックマークしようとすると、同じ状況で自分自身を見つけることができます—ブックマークに戻り、あなたは最初のスラこれらの問題の解決策は、HISTORY APIを使用してURLを変更することです。 しかし、私が最後までこのステップを残した重要な理由があります。 多くの場合、履歴APIを使用する例ではURLは変更されますが、新しいURLは使用されません。 これにより、ユーザーが更新したときに（醜い404エラーで）webアプリが壊れたり、ページの類似しているがわずかに異なるバージョンに移動したりする可能性があ 異なるUrlをどのように処理するかわからない場合は、前の例の単純化されたアプローチを使用することに恥はありません。

だから、あなたは、ダイビングより良いUrlを作成し、ブックマークやブラウザの更新でうまく再生する準備ができているとしましょう。 あなたが取ることができる二つの基本的なアプローチがあります：

• URLページ名を完全に変更します。 Dictionnaire Infernalの例では、URLをSlide1に変更することができます。html、Slide2。html、というように、ユーザーがスライドを移動するように。 キャッチは、これらの名前の実際のページを持つ必要があることです（そうしないでください、面倒です）、またはwebサーバーがSlide2の要求を取得するようにルーhtmlこれは、ページの正しいバージョンを作成するコードを実行します。
• 同じページ名を保持しますが、クエリ文字列に情報を追加します。 これは、より簡単で小規模なアプローチです。 ユーザーがスライドショーを移動すると、スライドショーのようなUrlになります。html？スライド=1、その後スライドショー。html？スライド=2、スライドショー。html？スライド=3などです。 このアプローチの利点は、クエリ文字列をチェックし、ページがリロードされたときに正しいスライドにいることを確認するJavaScriptの小さな部分を書くのは この作業を行うためにサーバーコードは必要ありません—1つのページですべてを行うことができます。ここでは、2番目のアプローチを使用する以前に見たpushState()呼び出しの修正バージョンがあります。 このコードは、スライド番号をURLの最後に詰め込みます。

  history.pushState(slide, null, "Dictionnaire.html?slide=" + slide);

  ページがリロードされたときに実行されるコードです。 URL内のスライド情報をチェックし、適切な番号が見つかった場合はgoToSlide()関数を呼び出してスライドをロードします。p>

  今、あなたはスライドショーであなたの場所を失うことは決してないだろう。 この例の完全なバージョンを試すか、ここですべてをダウンロードできます。History APIは使いやすいですが、解決する大きな問題を簡単に作成することもできます。 すべてがいかに一緒に合うか知っているので、ここに助言のある最後のビットはある:

  • あなたが押す場合は、ポップする必要があります。 pushState()onPopStateイベントはパートナーです。 あなたが一つに入れたものは、あなたは他のものと一緒に戻ってきます。
  • 処理する準備ができていない限り、URLを変更しないでください。 変更するページを反映するようにURLを変更するのはいいことですが、使用するすべてのURLの要求を処理できる必要があります。 URLが存在しないページを指している場合、更新とブックマーク時にアプリケーションが中断されます。
  • カスタム状態オブジェクトを使用して、より多くの情報を格納します。 あなたは単純な数字に固執する必要はありません。 カスタムオブジェクト全体を状態にすることができ、複雑なタスクに必要なすべての情報をまとめることができます。