トップ  »  コンピュータガイド  »  開発言語・スクリプト  »  JavaScript  »  JavaScript+CSSで「お待ちください...」画面をつくる

JavaScript+CSSで「お待ちください...」画面をつくる

概要

フォームなどで次のページにデータを渡したものの次のページでの処理が重くてブラウザ画面がフリーズした様に見えてしまうというのはうまくないですね。
大概のユーザはブラウザの読み込み中止ボタンを押してみたり、何度も何度もボタンをクリックしてしまって二重三重にデータが送られる結果になったりします。
アラートを出すなりして多重クリックを制御する方法もありますが、待たせている上にアラートを出すのもちょっとユーザフレンドリーではないので気が引けます。私だけかな...。
こんな時にはとりあえず「しばらくお待ちください。」的な画面に切り替えたいですね。
でも、フォームをサブミットしちゃったら処理が終わってサーバからのレスポンスがあるまで画面は遷移しないし...。
そんなとき、JavaScriptを使うと擬似的に画面を切り替えることが出来ます。
以下の方法は厳密に言うと、画面を切り替える(遷移させる)のではなく、JavaScriptを使ってCSSの"display"プロパティを変更する事によって画面はそのままで表示される内容だけを切り替えるやり方です。

HTMLの記述

まずは元となるHTMLファイルを用意します。
最初に表示されているフォームは「testform」というidを付けました。(idは任意)
ボタンをクリックして表示されるメッセージは"div"タグで囲み「wait_msg」というidを付けました。(idは任意)
そして、ボタンクリック時に呼び出される関数は「WaitDisplay()」として定義しました。(関数の内容はページ下方の"JavaScriptの記述"を参照してください。関数名は任意)

まずは「testform」部分ですが、こちらは最初に表示させている内容ですのでCSSdisplayプロパティは特に指定しません。
そして、このフォームの"送信"ボタン("value"を"送信"としてあるボタン)をクリックした時に画面の表示内容を切り替えるJavaScriptを呼び出しますので"送信"ボタンのonclickイベントに対して呼び出す「WaitDisplay()」を指定します。
"送信"ボタンのタグの「onclick="WaitDisplay()"」となっている部分がそれです。

※今回はサンプル用のソースで説明しているのでフォームの"action"の指定をしていませんし、"送信"ボタンの"type"も"submit"ではなく"button"にしていますが、実際には"action"の指定と、"送信"ボタンの"type"も"submit"に変更する必要があります。

<!-- 最初に表示されているフォーム:ここから -->
<form id="testform" method="post" action="">
 <table>
  <tr>
   <th>最初に表示されているフォーム</th>
  </tr>
  <tr>
   <td><label for="uid">ユーザID:</label>
   <input type="text" name="uid" id="uid" /></td>
  </tr>
  <tr>
   <td>
   <label>
   <input type="radio" id="long" name="prcs" value="1" />ものすごく時間の掛かる処理
   </label><br />
   <label>
   <input type="radio" id="heavy" name="prcs" value="2" />とてつもなく時間の掛かる処理
   </label>
   </td>
  </tr>
  <tr>
   <td class="center">
   <input type="button" name="Submit" value="送信" onclick="WaitDisplay()" />
   &nbsp;&nbsp;&nbsp;
   <input type="button" name="Cancel" value="キャンセル" onclick="history.back()" />
   </td>
  </tr>
 </table>
</form>
<!-- 最初に表示されているフォーム:ここまで -->

<!-- 切り替え後表示されるメッセージ:ここから -->
<div id="wait_msg">
 <h2>只今処理中につき、しばらくお待ちください...</h2>
 <p>処理が完了して結果が表示されるまでウェブブラウザの操作(再読み込み、読み込みの
 中止、ウインドウを閉じるなど)はせずにそのままお待ちください。</p>
</div>
<!-- 切り替え後表示されるメッセージ:ここまで -->

CSSの記述

次に「wait_msg」部分ですが、こちらはJavaScriptが実行されるまでは非表示の状態にしておきますのでCSSdisplayプロパティで"none"を指定しておきます。

#wait_msg {
 display: none;
}

displayプロパティの指定には以下のようにHTMLファイルの"div"タグの中に「style="display:none"」と直接記述して指定する方法もありますがXHTML1.0 Strictの作法に則って別途CSSファイルを用意したという事にして上記のように指定しました。

<div id="wait_msg" style="display:none">

JavaScriptの記述

そして、表示内容を切り替えるスクリプトの記述です。
testform」部分を非表示にするので"display"プロパティに"none"を指定し、「wait_msg」部分を表示するので"display"プロパティには"block"を指定します。

<script language="JavaScript" type="text/javascript">
<!--
function WaitDisplay(){
 document.getElementById('testform').style.display='none';
 document.getElementById('wait_msg').style.display='block';
}
//-->
</script>

前述したHTMLソースの「testform」部分にある"送信"ボタンのonclickイベントによってこの関数が呼び出され、最初表示されていた「testform」部分が非表示に、非表示になっていた「wait_msg」部分が表示されて見た目上画面が遷移したように見えます。
これで、サーバからレスポンスがあるまでは「お待ちください...」のメッセージが表示されるというわけです。

実際の動きはサンプルページから確認出来ます。→サンプルを見る

トラックバック(0)

トラックバックURL: http://www.ezms.net/mt/mt-tb.cgi/24