html5の履歴API

HTML5 と CSS3 を使用して、非常に美しいオンライン電子書籍「ブラウザとインターネットに関する 20 のこと」を実装した Google Chrome チームを賞賛せざるを得ません。

アクセスアドレス: http://www.20thingsilearned.com

この電子書籍が発売されてからかなり時間が経ちましたが、今読んでもまだ好きです。ページを更新せずに電子書籍のページを前後に切り替えることができます。これは OPOA (One Page One Application) の完璧な具現化です。

私は現在履歴 API について学んでいるので、更新せずにページ間を切り替えるために window.history.pushState() と window.history.replaceState() を使用する方法に特に興味があります。

今日いくつかの情報を確認し、履歴 API について基本的に理解しました。

最初に言っておきたいのは、履歴とは全体的な状況、つまり window.history であるということです。 window.history.back() または window.history.go(-1) を使用して前のページを返す JavaScript コードがよく見られるため、この変数名をよく理解しておく必要があります。

したがって、HTML4 の時代では、次の属性とメソッドを使用できます:

length: 履歴スタック内のレコードの数。

back(): 前のページに戻ります。

forward(): 次のページに進みます。

go([デルタ]): デルタは数値です。書き込まれていない場合、または 0 の場合は、このページを更新します。負の数値の場合は、対応するページ数に進み​​ます。を選択すると、対応するページ数に戻ります。

現在、HTML5 には次の 2 つのメソッドが追加されています:

pushState(data, title [, url]): 履歴スタックの先頭にレコードを追加します。 data はオブジェクトまたは null で、ウィンドウの Popstate イベント (window.onpopstate) がトリガーされたときにパラメータの state 属性として渡されます。title はページのタイトルですが、現在のすべてのブラウザはこのパラメータを無視します。ページの URL が書かれていない場合は、現在のページになります。

replaceState(data, title [, url]): 現在のページの履歴を変更します。パラメータは上記と同じです。この変更では URL にアクセスしません。ただし、現時点では Safari 5.0 以降、Chrome 8.0 以降、Firefox 4.0 以降、および iOS 4.2.1 以降でのみサポートされています。古いブラウザとの互換性を維持したい場合は、History.js を試すことができます。これにより、いくつかのバグも修正されます。

もちろん、モバイルプラットフォームでは、html5の履歴APIを大胆に試すことができます。 ios3.0 以降および Android2.0 以降のプラットフォームの組み込みブラウザは、歴史に最適です。これを使用すると、Web アプリをよりネイティブ アプリに近づけることができます。

以下、いくつかの記事をお勧めします:

.ブラウザ履歴の操作

.セッション履歴とナビゲーション

.楽しみと利益のための履歴の操作