先日、検索 → 一覧 → 詳細 という画面に対して、
- 一覧から詳細画面へはリンクをつかって遷移すること
- 詳細画面から一覧画面へは「パンくず」リンクを利用して戻れるようにすること
- 一覧画面は検索したときの条件で絞り込まれた一覧が表示されること
- 詳細画面へのURLに検索条件のURLクエリをつけず、詳細データへのIDのみをクエリにつけること
- Cookie(セッション)利用不可
という依頼を受けました。
SEO対策のためにURLに余計なクエリをつけたくないけど、パンくずのフローは辿ってきたフローをちゃんと戻れるようにしたいというのが趣旨でした。
そこでHTMLを生成するときには、ID、検索条件ともにリンクのURLにクエリとして追加しておき、Javascriptを利用して、URLからクエリの一部を抜き取り、リンクをクリックしたときに、それらがPOSTされるようにしました。
書いておけば、後々役に立つかなと思ったので書いてみることにしました。
下がそのサンプルになります。
どちらも同じURLを指定していますが、開く画面は別になるようになっています。
この処理の手順はこんな感じになります。
- リンク要素を取得する
- リンクのURLをアドレスとクエリにわける
- 動的にフォームを生成し、生成したフォームにクエリをhiddenとして追加していく
- リンクのhref属性の書き替え
- リンククリック時に生成したフォームがsubmitされるようにする