履歴

Internet Explorer 10 では、サイトの履歴スタックと URL を管理できるメソッドを含む、HTML5 草案仕様の History インターフェイスのサポートが導入されました。 このコントロールでは、エンド ユーザーが [戻る] または [進む] ボタンを押した場合に期待どおりの動作が得られます。また、ページの移動や読み込みを行わずに、細かな更新を実行できます。HTML5 History は、World Wide Web コンソーシアム (W3C) の HTML5 仕様に記載されているセクション 5.4.2 で定義されています。

history.pushState() メソッドと history.replaceState() メソッド

history.pushState() メソッドを使うと、新しい履歴エントリを作成して、必要に応じて状態オブジェクトを含めることができます。history.replaceState() メソッドを使うと、現在の履歴項目を変更できます。この 2 つのメソッドの構文は次のとおりです。


history.pushState(data, title, url); 
history.replaceState(data, title, url); 


パラメーター説明

data

新しい履歴エントリに関連付ける状態オブジェクト。onpopstate イベントの state プロパティとして返されます。

title

現在、Internet Explorer 10 では無視されます。

url

(省略可能) 現在の URL と同じドメインまたは基点の相対または絶対 URL。

 

これらの新しい HTML5 メソッドを使うと、Web サイト内のパスを変更できますが、セキュリティ上の理由により、現在の URL のドメインや基点を変更できません。また、ハッシュとも呼ばれるポンド記号 (#) に続く URL のフラグメント、または URL の疑問符 (?) に続くクエリ セグメントを変更することもできます。たとえば、"http://go.microsoft.com/fwlink/p/?LinkId=214816" という URL を使うと、".com" の右側をほとんど変更できます。これは、"http://go.microsoft.com/fwlink/p/?LinkID=58649" に変更できますが、ドメイン (go.microsoft.com)、ポート、スキーム (http://) を変更することはできません。 次の表は、この URL に対するその他の更新とその更新が可能かどうかを示しています。

URL の変更状態
go.microsoft.com/foo可能
http://go.microsoft.com/foo可能
/foo可能
Foo?query可能
/foo#somedata可能
www.microsoft.comエラー
http://go.microsoft.com:9090/fooエラー

 

window.onpopstate イベント

ユーザーが履歴内の 2 つの移動エントリ間を移動し、そのうち少なくとも 1 つが history.pushState() または history.replaceState() で作成されているときに、window.onpopstate イベント ハンドラーはアプリに通知します。これは、UI による対話的操作 (戻るボタンや進むボタンをクリックする、コンテキスト メニューの [戻る] をクリックする、BackSpace キーを押すなど) を通じて発生します。また、Alt + 左方向キー、Alt + 右方向キー、または BackSpace キーを押したり、history.backhistory.forward、または history.go を呼び出したりした場合にも発生します。

popstate イベント パラメーターには、pushState メソッドまたは replaceState メソッドの (データ パラメーターによって設定された) 状態オブジェクトが含まれています。history.state プロパティにも状態オブジェクトが含まれています。ページを最初に読み込んだときに、状態は NULL になります。pushState を呼び出すと "進む" スタックは消去されますが、replaceState を呼び出しても "進む" スタックは消去されません。

API リファレンス

PopStateEvent
pushState

Internet Explorer Test Drive デモ

HTML5 History の例 (元に戻す) に関するページ

IEBlog 記事

IE10 での HTML5 History に関する記事

仕様

HTML5: セクション 5.5.2

 

 

表示:
© 2014 Microsoft