Clever Geek Handbook

HTML5 History APIの概要

HTML5より前は、location.hashからコンテンツをリロードしたりハッキングしたりすることなく制御および管理できなかった唯一のことは、1つのタブの履歴だけでした。 HTML5履歴APIの出現により、すべてが変更されました-履歴を歩き回り（以前も可能）、履歴に要素を追加し、履歴に沿ったトランジションやその他の有用性に対応できます。 この記事では、HTML5 History APIを見て、その機能を示す簡単な例を作成します。



基本的な概念と構文



History APIは、1つのDOMインターフェイス-Historyオブジェクトに依存しています。 各タブには、 window.history



ある一意のHistoryオブジェクトがあります。 履歴には、JavaScriptから制御できるいくつかのメソッド、イベント、およびプロパティがあります。 各タブページ（ドキュメントオブジェクト）は、Historyコレクションのオブジェクトです。 ストーリーの各要素は、URLおよび/または状態オブジェクト（状態オブジェクト）で構成され、タイトル（タイトル）、ドキュメントオブジェクト、フォームデータ、スクロール位置、およびページに関連するその他の情報を持つことができます。



Historyオブジェクトの主なメソッド：

  1. window.history.length



    ：現在の履歴セッションのエントリ数
  2. window.history.state



    ：現在の履歴オブジェクトを返します
  3. window.history.go(n)



    ：歴史を歩き回ることができるメソッド。 引数は、現在位置からのオフセットです。 0が渡されると、現在のページが更新されます。 インデックスが履歴を超えた場合、何も起こりません。
  4. window.history.back()



    ： go(-1)



    を呼び出すのと同じメソッド
  5. window.history.forward()



    ： go(1)



    を呼び出すのと同じメソッド
  6. window.history.pushState(data, title [, url])



    ：履歴要素を追加します。
  7. window.history.replaceState(data, title [, url])



    ：現在の履歴アイテムを更新します


履歴を2ステップ戻すには、次を使用できます。 

 history.go(-2)


ストーリーアイテムを追加するには、 history.pushState



を使用できますhistory.pushState 





 history.pushState({foo: 'bar'}, 'Title', '/baz.html')


履歴レコードを変更するには、 history.replaceState



を使用できますhistory.replaceState 





 history.replaceState({foo: 'bat'}, 'New Title')


生きている例



これで基本がわかったので、実際の例を見てみましょう。 選択した画像のURIを見つけることができるWebファイルマネージャーを実行します（ 最後に何が起こるかを参照してください ）。 ファイルマネージャは、JavaScriptで記述された単純なファイル構造を使用します。 ファイルまたはフォルダーを選択すると、画像が動的に更新されます。

画像

data-*



属性を使用して各画像のタイトルを保存し、データセットプロパティを使用してこのプロパティを取得します。 

 <li class="photo"> <a href="crab2.png" data-note="Grey crab!">crab2.png</a> </li>


すべてが迅速に機能するように、すべての画像をロードし、 src



属性を動的に更新します。 この加速は1つの問題を引き起こします-それはボタンを破壊するので、写真を前後に進めることはできません。



HTML5の歴史が助けになります！ ファイルを選択するたびに、新しい履歴レコードが作成されlocation



ドキュメントのlocation



が更新されます（一意の画像URLが含まれます）。 これは、戻るボタンを使用して画像をバイパスできることを意味します。一方、アドレスバーには画像への直接リンクがあり、ブックマークに保存したり、誰かに送信したりできます。



コード



2人のディーバがいます。 1つにはフォルダー構造が含まれ、もう1つには現在の画像が含まれます。 アプリケーション全体はJavaScriptを使用して管理されます。 最も重要なポイントのみが強調表示されます。 この例のソースコードは非常に短く（約80行）、記事全体を読んだ後に参照してください。



bindEvents



メソッドはpopstate



イベントのハンドラーをbindEvents



ますpopstate



イベントは、ユーザーが履歴をpopstate



ときに呼び出され、アプリケーションがその状態を更新できるようにします。 

 window.addEventListener('popstate', function(e){ self.loadImage(e.state.path, e.state.note); }, false);


popstate



イベントpopstate



渡されるevent



オブジェクトにはstate



プロパティがあります。これは、 pushState



またはreplaceState



最初の引数として渡したデータです。



ファイル構造を表すdivのclick



イベントにハンドラーをアタッチします。 イベントの委任を使用して、フォルダーを開閉するか、写真をアップロードします（履歴にエントリを追加します）。 どの要素をクリックしたかを理解するためにclassName



親要素のclassName



を確認します。

-これがフォルダである場合、それを開いたり閉じたりします

-これが写真である場合、それを表示し、履歴の要素を追加します 



 dir.addEventListener('click', function(e){ e.preventDefault(); var f = e.target; //   if (f.parentNode.classList.contains('folder')) { //     self.toggleFolders(f); } //   else if (f.parentNode.classList.contains('photo')){ note = f.dataset ? f.dataset.note : f.getAttribute('data-note'); //   self.loadImage(f.textContent, note); //    history.pushState({note: note, path:f.textContent}, '', f.textContent); } }, false);


画像の内容を変更し、署名を更新する方法は非常に簡単です。 

 loadImage: function(path, note){ img.src = path; h2.textContent = note; }


History



オブジェクトの更新されたインターフェースの機能を実証する簡単なアプリケーションを得ました。 pushState



を使用してストーリーアイテムとpopstateイベントを追加し、ページのコンテンツを更新します。 さらに、画像をクリックすると、アドレスバーにその実際のアドレスが表示されます。これを保存したり、誰かに送信したりできます。



いつ使用できますか？



Firefox 4以降

Safari 5以降

Chrome 10以降

Opera 11.5+

iOS Safari 4.2以降

Android 2.2以降

IE ???

履歴APIをサポートするブラウザーのリスト



どこで使用されていますか？



1. Facebook

2. Github-プロジェクトツリーのナビゲーション

3. ???



読む



1. 楽しみと利益のために歴史を操作する

2. WHATWG HTML5履歴API

3. W3C履歴API仕様

4. ブラウザの履歴を操作する MDC

5. History.js-スクリプトは、HTML5履歴API（location.hashマジック）をエミュレートしますが、これをサポートしていないブラウザーでは


More articles:


All Articles