スタート

このサンプルのリンクを踏むと、リロードなしでページの内容とURLが切り替わります。

ブラウザで「戻る」「進む」およびリロードもできます。

次→

画面1

今回はあらかじめHTMLに全ての画面の内容を書いておき、リンクを踏んだ時に要素の表示/非表示を切り替えているだけです。

ここではそれを「画面」と読んでます。

「画面」要素にはデータ属性 data-screen-name を付与してます。値は「画面名」です。(開発者ツールで見てみてください)

また、リンク要素にはデータ属性 data-ref-screen-name を付与してます。値は「遷移先の画面名」です。

←前 次→

画面2

各リンクには、onclickで pushState を呼び出すイベントを仕掛けてあります。

pushState を使うと、popstate時 (「戻る」「進む」が押された時) に持ち回れる任意の情報 (state) をセットできます。

ここでは state に「画面名」を持たせてます。popstate時に「画面名」を取り出して、目的の画面を表示してます。

←前 次→

画面3

リロード対策のため、このディレクトリ以下へのアクセスは、.htaccessを使って全てこのページに集めてます。

なのでこのページはonload時にURLの最後のスラッシュ以降を見て、最初に表示する画面を切り替えてます。

試しにURLの最後を p2 に書き換えて飛んでみてください。画面2が表示されると思います。

ちなみに、URLの最後に aaa とか存在しない画面名を指定すると、「見つかりませんでした」画面が表示されます。

※ただしここではJSのパスを相対指定してるので、スラッシュを含む名称を入れるとアウトです。すみません。

←前

画面が見つかりませんでした。

スタートに戻る