| ポイント |
<![CDATA[
function check()
{
str = document.myFORM.PW.value;
if (str == "gihyo") jpURL = "ok.html"; else jpURL = "err.html";
location.href = jpURL;
}
パスワード：<input type="password" name="PW">
<input type="button" value="ログイン" onClick="check()">
]]>
|
| 説 明 |
prompt()を使ったパスワード入力では入力中のパスワードが見えてしまいます。入力中のパスワード文字が見えないようにするにはフォームのpasswordを使います。入力されたパスワードをチェックして会員用のページにジャンプするか、認証失敗のページにジャンプするか処理を行います。ただ、この方法だとパスワードが入力されるまで待つというprompt()のような事ができません。このような場合は認証するページをshowModalDialog()を使って呼び出します。表示するページのURLを呼び出し元のウィンドウへ渡すには「window.returnValue = jpURL;」のようにします。returnValueプロパティに値／文字列などを代入し、「data = showModalDialog()」として戻り値を受け取るようにします。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>パスワードが正しい場合ページを表示する（ShowModalDialog版）</title>
<script language="JavaScript"><!--
jpURL = showModalDialog("check.html",window,"status:false;dialogWidth:240px;dialogHeight:120px");
location.href = jpURL;
// --></script>
</head>
<body>
</body>
</html>
]]>
|
| 補足説明 |
サーバー側で認証機構が使用できるのであれば、そちらを使う方がより確実かつ安全です。また、check.htmlの内容は以下の通りです。
<![CDATA[
<html>
<head>
<title>パスワードが正しい場合ページを表示する（ShowModalDialog版）</title>
<script language="JavaScript"><!--
function check()
{
str = document.myFORM.PW.value;
if (str == "gihyo") jpURL = "ok.html"; else jpURL = "err.html";
location.href = jpURL;
}
// --></script>
</head>
<body>
<form name="myFORM">
パスワード：<input type="password" name="PW">
<input type="button" value="ログイン" onClick="check()">
</form>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
パスワードが正しい場合ページを表示する（ShowModalDialog版）