HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML5 グラフィックス

HTML5 履歴API

HTML5履歴APIの使用方法、オンラインのインスタンスデモHTML5履歴APIの使用方法、ブラウザの互換性、文法の定義、属性値の詳細情報などについて詳しく説明します。

HTML5履歴APIを使用して、JavaScriptでブラウザのナビゲーションヒストリをアクセスできます。HTML5履歴APIは、SPA（Single Page Application）で非常に役立ちます。SPAはHTML5履歴APIを使用して、アプリケーション内の特定の状態を「マーク」できるようにします。後で、SPA（Single Page Application）で履歴APIを使用してマーク可能な状態を構築する方法について説明します。

履歴スタック

ブラウジング履歴はURLの積み重ねから成り立っています。ユーザーが同じウェブサイトでブラウジングを行うたびに、新しいページのURLがスタックの先頭に配置されます。ユーザーが「戻る」ボタンをクリックすると、スタックの指標が先頭の要素に移動します。ユーザーが再度「進む」ボタンをクリックすると、指標がスタックの最上位の要素に前進します。ユーザーが「戻る」ボタンをクリックした後、新しいリンクをクリックすると、スタックの最上位の要素が新しいURLで上書きされます。

これは履歴スタックの例です：

http://myapp.com/great-new-story.html
http://myapp.com/news.html
http://myapp.com

上記の履歴スタックで最後にアクセスしたページはhttp://myapp.com/great-new-story.html。ユーザーが「戻る」ボタンをクリックすると、履歴スタックの指標が戻りますhttp://myapp.com/news.html。ユーザーが「進む」ボタンをクリックすると、履歴スタックの指標が前に進みますhttp://myapp.com/great-new-story.html、ユーザーが別のリンク（http://myapp.com/news.htmlページ上)、そのリンクのURLはhttp://myapp.com/news.htmlが履歴スタックで上書きされます。

HTML5歴史記録APIは、Webアプリケーションがこの履歴記録スタックにアクセスできるようにします。

HTML5歴史記録APIのセキュリティ制限

HTML5歴史記録APIは、ウェブページが同一ドメインにある部分のブラウザの履歴記録にアクセスを許可します。セキュリティの理由から、この制限は歴史記録APIの中で必要です。したがって、ウェブページはユーザーがどの他のウェブサイトを訪問したかを確認することができません。

同様に、HTML5歴史記録APIは、同一ドメインでないURLを履歴記録スタックにプッシュするようにウェブページを制限します。この制限は、ユーザーがウェブページを入力し始めたときに、ウェブページがユーザーをPaypalなどに転送し、ユーザーのユーザー名を嗅ぎ出すことを防ぐために必要です。/パスワードなど。

歴史オブジェクト

historyオブジェクトを通じて、ブラウザの履歴記録にアクセスできます。このオブジェクトは、JavaScriptでグローバルオブジェクトとして使用できます（実際にはwindow.historyです）。

historyオブジェクトには以下の機能が含まれています-包括歴史記録API：

back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)

このback()機能は、ブラウザの履歴記録を前のURLに戻します。back()の呼び出しは、ユーザーがブラウザの「戻る」ボタンをクリックするのと同じ効果があります。

このforward()機能は、ブラウザの履歴記録を次のページに前進させます。forward()の呼び出しは、ブラウザの「前進」ボタンをクリックするのと同じ効果があります。back()関数が呼び出された場合や「戻る」ボタンをクリックした場合のみ、back()が可能です。履歴記録がブラウザの履歴記録中の最新のURLに指している場合、前進する方向はありません。

このgo(index)関数は、go()関数に引数として渡されたインデックスに基づいて履歴記録を後退または前進させます。go()を負のインデックスで呼び出すと（例えば、go(-1))、ブラウザは履歴記録に戻ります。go()関数に正のインデックスを渡すと、ブラウザは履歴記録を前進します（例えば、go(1))。インデックスは、ブラウザの履歴記録を前進または後退するための歴史記録中のステップを示します。例えば、1,2、-1、-2など。

このpushState(stateObject, title, url)関数は新しいURLを履歴記録スタックにプッシュします。この関数には3つの引数があります。urlは履歴スタックにプッシュされるURLです。title引数は通常ブラウザで無視されます。stateObjectは、新しいURLが履歴スタックにプッシュされると、イベントが渡されるオブジェクトとして使用されます。stateObjectは、必要なデータを含むことができます。それは単なるJavaScriptオブジェクトです。

replaceState(stateObject, title, url)関数の機能はpushState()関数に似ていますが、履歴スタックの現在の要素を新しいURLで置き換えるだけです。現在の要素は最も重要な要素であるとは限りません。これは現在指されている要素であり、back()、forward()、go()機能がhistoryオブジェクトに呼び出された場合のどの要素でもできます。

履歴APIの例

今度は、HTMLの5履歴APIの例です。

back()とforward()

まず、back()とforward()関数を使用して履歴の中で行ったり来たりする方法を見てみましょう：

history.back();
history.forward();

historyオブジェクトはwindowオブジェクトにありますので、以下のように書くこともできます：

window.history.back();
window.history.forward();

しかし、windowオブジェクトがデフォルトのオブジェクトであるため、省略することができます。このトレーニングの残りの部分では、windowオブジェクトを省略します。

覚えておいてください、除非あなた（またはユーザー）がまず履歴を戻すことを行った場合、履歴に移動することはできません。

go()

今度は、go()関数を使用してback()やforward()関数の動作に似たアクションを行う方法を見てみましょう。まず、go()を使用して履歴を一歩後退する前のステップは以下の通りです：

history.go(-1;

二歩後退するには、以下のようにします：-2パラメータは以下のようにgo()関数に渡されます：

history.go(-2;

同様に、履歴を前進させるために、go()関数に正のインデックスを渡すことができます。以下は、一歩と二歩を前に進める例です：

history.go(1;
history.go(2;

もちろん、これらの二行を同時に実行すると、ブラウザの履歴は全体として一歩前進します。3ステップです。

pushState()

状態を履歴スタックにプッシュするには、historyオブジェクトのpushState()関数を呼び出してください。以下はpushState()の例です：

var state = {};
var title = "";
var url = "next"-page.html";
history.pushState(state, title, url);

この例では、新しいURLを履歴スタックにプッシュします。これにより、ブラウザのアドレスフィールドのURLも変更されますが、ブラウザがそのURLをロードしようとはしません。

replaceState()

replaceState()関数は、現在の履歴スタックに指しているhistory要素を置き換えます。ユーザーが"戻る"ボタンを使用して履歴に戻した場合、これは最も重要な要素ではありません。これはreplaceState()の例です：

var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);

replaceState()もまた、ブラウザのアドレスフィールドのURLを変更しますが、ブラウザがそのURLをロードしようとはしません。replaceState()のURLのページはブラウザ内に保持されます。

ブラウザの履歴の変更

HTML5履歴APIは、ウェブページがブラウザの履歴の変更をリスンできるようにします。安全制限も適用されるため、URLがウェブページのドメインを超える履歴の変更は通知されません。

ブラウザの履歴の変更をリスンするには、windowオブジェクトにonpopstateリスナーを設定してください。これはブラウザの履歴イベントリスナーの例です：

window.onpopstate = function(event){
　　　　console.log("履歴が変更されました："　+　document.location.href);
　}

onpopstateイベントハンドラは、同一ページ内のブラウザの履歴が変更されるたびに（ブラウザの履歴、ページが履歴スタックにプッシュされるたびに）呼び出されます。履歴変更イベントに対する反応は、URLからパラメータを抽出し、対応する内容をページにロードすること（例えば、AJAXを通じて）が考えられます。

注意：変更が発生した場合にのみ、"戻る"や"進む"ボタン、または対応する履歴ナビゲーション機能のback()、forward()、およびgo()がonpopstateイベントリスナーを呼び出します。pushState()やreplaceState()関数の呼び出しは、履歴の変更イベントをトリガーしません。

History APIの実際の使用法

新しいURLを履歴スタックにプッシュすると、ブラウザのアドレスフィールドのURLが新しいURLに変更されますが、ブラウザはそのURLをロードしようとはしません。URLを表示し、スタックにプッシュするだけで、ブラウザがそのページを訪れたかのように見えますが、新しい状態のページはブラウザ内に保持されます。

新しいURLを履歴スタックにプッシュすることは、SPA（シングルページアプリケーション）内で特定の状態をブックマークに追加するための非常に便利な方法です。例えば、SPAのオンラインストアでは、アプリケーションのURLは以下のようになります：

http://myshop.com

このアプリケーションは、ユーザーが同じページで製品を表示できる可能性がありますが、ユーザーはどうやって特定の製品へのリンクを友達に送信するのでしょうか？

解決策は、新しい製品をロードする際に、シングルページアプリケーションが新しいURLを履歴スタックにプッシュすることです。これは新しいURLのロードを引き起こしませんが、ブラウザのアドレスフィールドに新しいURLが表示されるため、ブックマークとして追加したり、メールなどにコピー＆ペーストすることができます。このようなブックマーク可能なURLの例を以下に示します：

http://myshop.com?productId=234

または、より読みやすいURL：

http://myshop.com/products/234

またはRESTを少し超えるバージョン（製品タイプも言及されています）：

http://myshop.com/products/books/234

URLをブラウザの履歴にプッシュした後、WebストアページはAJAXを使用して対応する製品をロードし、ユーザーに表示します。

ユーザーが「戻る」ボタンをクリックすると、onpopstateがイベントハンドラを呼び出します。その後、ウェブページは新しいURLが何かを確認し、URLが返された場合、対応する製品やアプリケーションのホームページhttp://myshop.com。

これはHTML5コードサンプルは、AJAXを使用してデータをブラウザにロードする原理を説明しています：

<a href="javascript:push('http://myshop.com/books/123');">
　　　　Book　123
</a><br/
<a href="javascript:push('http://myshop.com/apps/456');">
　　　　App　456
</a>
<script>

　　　　console.log("loading data from url: "　+　url);
}
function push(url) {
　　　　history.pushState(null, null, url);
　　　　loadUrl(url);
}

　　　　console.log("history changed to: "　+　document.location.href);
　　　　loadUrl(document.location.href);
}
</script>

このサンプルには、JavaScript Clickリスナーを持つリンクが2つ含まれています。リンクの1つをクリックすると、対応するURLが履歴スタックにプッシュされ、ブラウザにロードされます。

このサンプルには、ユーザーが「戻る」または「進む」ボタンをクリックしたときに呼び出されるonpopstateイベントリスナーが含まれています。このイベントリスナーは、ブラウザのアドレスフィールドに現在表示されているURLをロードします。

サーバーを設定する

ユーザーがリンクをクリックし「戻る」 /「進む」ボタンをクリックすると、前に表示された例が有効になります。しかし、ユーザーがURLを友達に送信したり、ブックマークに追加して後にアクセスするとどうなりますか？

ユーザーがタブ付きのURLにアクセスを試みた場合、http://myshop.com/books/123この場合、ブラウザはそのURLに対するWebサーバーへのリクエストを行います。Webサーバーは、URLから送信された同じシングルページアプリケーションhttp://myshop.com。この操作を行うために、Webサーバーを設定する必要があります。

同様に、シングルページWebアプリケーションは、最初にロードしたURLを確認し、そのURLを使用してロードおよび表示する内容を決定する必要があります。したがって、シングルページアプリケーションがURLをロードした場合、myshop.com/books/123このアプリケーションは、適切な製品をロードし表示する必要があります。このURLのチェックは、シングルページアプリケーションの初期化中に行わなければなりません。

ブラウザがHTML5历史記録APIのサポート

この記事を執筆している際には、Opera Miniを除き、すべての現代のブラウザ(IE、Safari、Chrome、Firefox)がHTMLをサポートしています5历史記録API。

HTML5 Canvas 枠と塗りつぶし HTML(5) コード記述規範