リファラ操作して次画面に!遷移元履歴を書き換えるJavaScript history.pushState


history_pushstate_003

現役バリバリ 日々 仕事や趣味で新しいIT技術を追い求め奮闘しているエンジニアです。

Webアプリ(サイト)を作っていたら、結構めんどうな作業に「戻るリンク」がありますよね。
遷移元が1つならいいんです。
でも、遷移元が複数ある場合は ちょっと作りこまないといけない。

これを楽にしたいな!と思って 「リファラ取ってそこに戻してやれ!」 と思ったけど問題が・・・・

戻り先をリファラで取得する場合の問題点

例えば次のようなパターン
history_pushstate_001

ショッピングサイトがあって次のような遷移するとします。

  1. トップページから商品一覧へリンクで遷移
  2. 商品一覧には絞り込みフォームがあって、条件を絞り込んで検索ボタン押下
  3. 検索条件をPOSTパラメータで受け取り検索条件に該当した一覧を表示
  4. 該当した商品一覧から商品詳細へリンクで遷移
  5. 商品詳細には戻るリンクがあって、前画面に戻る

「検索条件を保持した状態の商品一覧へ戻って!」 という要望も多いのですが、これは例なのでそこは置いといて 検索前の商品一覧「/list/index」に戻りたいんです。
でも、商品詳細からリファラとると 検索結果後の商品一覧「/list/serach」になってしまいます。
望んだ戻り先とは異なります。

リファラって書き換えられないの?

リファラはヘッダ情報としてブラウザ(クライアント側)が送信する情報なので クライアント側で書き換えてしまえば楽です。
クライアントサイドスクリプトの代表言語といえば JavaScript!
ってことで JavaScript を使って書き換えちゃいました。

では、JavaScriptのどの関数で書き換えるのか?

history.pushState

この関数ですが、リファラを操作するのではなく正確には履歴を操作する関数です。
現在のURLを書き換えてから次の画面に遷移するので 結果的にリファラも書き換えられるんですね。

動作確認

history_pushstate_002

サンプルで準備したファイルは以下のとおり

  • index.php
    トップ画面。一覧画面と詳細画面に遷移できる。
  • list.php
    一覧画面。検索ができる。検索結果は sernch.phpで表示する。
  • search.php
    検索結果画面。検索結果の一覧を表示する。詳細画面に遷移できる。
  • detail.php
    詳細画面。戻るリンクとトップ画面へのリンクを表示する。
    戻るリンクは遷移元を判断し、一覧画面とトップ画面に戻る。
    ※検索結果画面に戻らないことに注目!

index.php トップ画面

<?php header('Content-Type: text/html; charset=UTF-8'); ?>
<a href="list.php">一覧</a><br>
<a href="detail.php">詳細</a>

一覧画面と詳細画面へのリンクだけのソースです。

list.php 一覧画面

<?php header('Content-Type: text/html; charset=UTF-8'); ?>
<form action="search.php" method="post">
    <input type="submit" value="検索">
</form>

具体的な検索条件の入力を省いた 検索ボタン だけのソースです。

search.php 検索結果画面

<?php header('Content-Type: text/html; charset=UTF-8'); ?>
【検索結果】
<hr>
<a href="javascript:void(0)" onclick="next_page()">詳細へ</a>
<script>
function next_page(){
    history.pushState(null,null,"list.php");
    location.href="detail.php";
    return false;
}
</script>

詳細画面に遷移するボタンがあるだけですが、ここで今回のポイント 履歴の書き換えです。

history.pushState(null,null,"list.php");

現在のURLは search.php ですが list.php に履歴情報を書き換えてから 詳細画面に遷移します。

search.php 検索結果画面

<?php header('Content-Type: text/html; charset=UTF-8'); ?>
<a href="<?php echo $_SERVER['HTTP_REFERER']; ?>">戻る</a><br>
(<?php echo $_SERVER['HTTP_REFERER']; ?>)
<hr>
<a href="index.php">トップへ</a>

PHPでリファラを取得し、戻るリンクのURLにしています。

$_SERVER['HTTP_REFERER']

実行すると、検索結果画面から遷移にてきたにも関わらず、 list.php(一覧)画面の値が取得できます。
これで、検索一覧画面(search.php) から遷移してきた場合 list.php(一覧)画面に戻り、 トップ画面(index.php)から遷移してきた場合 トップ画面(index.php)に戻ります。

まとめ

戻るリンク処理は 戻り先の条件を維持するとか 次画面から戻ってきた場合は無視するとか 案件によって複雑なので全てがこの方法で簡単に終わらすことはできませんが、この処理をベースに拡張したら結構コードが少なくできました。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です