ユーザーに簡単な入力をお願いして入力後完了画面に遷移した状態の時に、同じユーザーにまた入力をしてほしくない時がありますよね?たとえば、ユーザーIDを発行する画面とか。
そんな時に以前の画面に戻れなくする簡単便利なJavaScriptを教えてもらったので共有しておきます。
まず、答えだけ書いておくと、
<script>window.onunload=function(){};</script>
<script>window.history.forward();</script>
を以前の画面のベースとなるテンプレートファイルの先頭に <script>
タグに囲んで入れてあげるだけです。
解説です。
forward関数定義を調べればすぐにわかりますが、単純に、ブラウザの履歴から次のURLをロードするだけの関数です。
つまり、初めての入力時にはブラウザの履歴には次のURLがないのでこのscriptが発火しても問題なく、入力終了時にはすでに完了画面がブラウザの履歴には残っているので、このテンプレートをレンダリングする際に履歴上の次である現在の完了画面に移動する、というscriptです。
これは現在の環境(Mac OSX 10.10.3, Chrome(Version 47.0.2526.73 (64-bit))では問題無いなく動作します。問題はSafariだと(cacheが見えてしまうために)期待どおりに動作せず、戻りたくない画面に戻ってしまいます。つまり、クロスブラウザだと期待どおりに動作しないのです。
これを解消するためにunloadイベントがあればブラウザにキャッシュをしない性質を利用して、空関数を呼び出す、 window.onunload=function(){};
コードを先に実行させてあげましょうね、というお話でした。
2015 tech-yuruyuru アドベントカレンダー20日目の記事として書いています。