このプログラムは、下位ディレクトリ名をログイン名とし、
その中にパスワードをファイル名としたHTMLを置くという物です。

これにより、リンク先のページのログイン名,パスワードを入力しないと
進めないようにするものです。

注意事項
(必ずお読みください)

色で書かれた文字は同色で書かれた同じ名前を使用するということです。
確認をクリックすれば実際の動きを見られます。
確認後はブラウザの "戻る" ボタンで戻ってください。

確認

pass1.html

  1. <HTML>
  3. <HEAD>
  5. <META NAME="robot-control" CONTENT="deny-all">
  6. <META NAME="robots" CONTENT="noindex, nofollow">
  8. <TITLE>Password</TITLE>
  10. <SCRIPT LANGUAGE="JavaScript">
  11. <!--
  12. function kakunin(){
  13. 　　alert("あなたのログイン名とパスワードを入力して下さい。");
  14. 　　window.open("password.html","password","width=330,height=140");
  15. }
  16. //-->
  17. </SCRIPT>
  19. </HEAD>
  21. <BODY>
  23. <CENTER>
  24. この先へ進むには<A HREF="JavaScript:kakunin()">ここをクリック</A>してください。
  25. </CENTER>
  27. </BODY>
  29. </HTML>

password.html
  1. <HTML>
  3. <HEAD>
  5. <META NAME="robot-control" CONTENT="deny-all">
  6. <META NAME="robots" CONTENT="noindex, nofollow">
  8. <TITLE>Password</TITLE>
  10. <SCRIPT LANGUAGE="JavaScript">
  11. <!--
  12. function pass(f){
  13. 　　if (document.MyForm.user.value=="" && document.MyForm.MyPW.value==""){
  14. 　　　　alert("ログイン名とパスワードが入力されていません");
  15. 　　}
  16. 　　else{
  17. 　　　　if (document.MyForm.user.value==""){
  18. 　　　　　　alert("ログイン名が入力されていません");
  19. 　　　　}
  20. 　　　　if (document.MyForm.MyPW.value==""){
  21. 　　　　　　alert("パスワードが入力されていません");
  22. 　　　　}
  23. 　　}
  24. 　　if (!document.MyForm.user.value=="" && !document.MyForm.MyPW.value==""){
  25. 　　　　window.opener.document.location.href = f.user.value+"/"+f.MyPW.value+".html"
  26. 　　　　close();
  27. 　　}
  28. }
  30. function out(){
  31. 　　close();
  32. }
  33. //-->
  34. </SCRIPT>
  36. </HEAD>
  38. <BODY>
  40. <CENTER>
  41. <FORM NAME="MyForm">
  42. <TABLE BORDER="0">
  43. 　　<TR>
  44. 　　　　<TD>
  45. 　　　　　　<B>Login Name :</B><BR>
  46. 　　　　　　<INPUT TYPE="text" NAME="user" size=35><BR>
  47. 　　　　　　<B>Pass Word :</B><BR>
  48. 　　　　　　<INPUT TYPE="password" NAME="MyPW" size=35>
  49. 　　　　</TD>
  50. 　　</TR>
  51. 　　<TR>
  52. 　　　　<TD>
  53. 　　　　　　<CENTER>
  54. 　　　　　　<INPUT TYPE="button" NAME="MyButton" VALUE="　O K　" onClick="pass(this.form)">　
  55. 　　　　　　<INPUT TYPE="reset" VALUE="RESET">　
  56. 　　　　　　<INPUT TYPE="button" NAME="close" VALUE="CLOSE" onClick="out()">
  57. 　　　　　　</CENTER>
  58. 　　　　</TD>
  59. 　　</TR>
  60. </TABLE>
  61. </FORM>
  62. </CENTER>
  64. </BODY>
  66. </HTML>

N038Dv3j.html
  1. <HTML>
  2. <HEAD>
  4. <META NAME="robot-control" CONTENT="deny-all">
  5. <META NAME="robots" CONTENT="noindex, nofollow">
  7. <TITLE>SECRET</TITLE>
  8. </HEAD>
  9. <BODY>
  10. |
  11. |このページがパスワード保護されます。
  12. |
  13. </BODY>
  14. </HTML>

プログラムの説明です。< >で囲まれた部分は、行番号を
表しています。また、クリックすればその行へジャンプします。

pass1.html
<14>
 window.open("password.html","password","width=330,height=140");
password.htmlは、パスワード等を入力するためのHTMLのファイル名(パス)です。
passwordは、開いたウィンドウの名前です。
width=330,height=140は、開くウィンドウのサイズです。
それぞれは適当に変えて下さい。

password.html
<12-28>
 ログイン名とパスワードが入力されているか判断し、
入力されていれば、それをもとに元々開いていた親の
ウィンドウにパスワードで保護されたページを表示する関数です。
<25>
 ".html" の部分は､パスワード保護されたページの拡張子です。
場合によって ".htm,.txt" 等に変えてください。
f.user.value+"/"+f.MyPW.value+".html"
このファイルパスは、"password.html"からの相対パスです。
<30-32>
 ログイン名、パスワード入力ウィンドウを閉じるための関数です。
別になくてもOSごとのウィンドウの閉じ方で閉じられるので
無くても良いのですが、一応作っておきました。
<42-60>
 別にテーブルに入れる必要もないのですが、
レイアウトのために使ってあります。
(全てのブラウザがスタイルシートに対応しているわけではないので...。)

N038Dv3j.html
<N038Dv3j.html>
 このHTMLのファイル名がパスワードとなります。
また、ファイル名の 大文字、小文字 は通常区別されます。
パスワードは、 半角アルファベット,数字のみ にすることを
進めます。これはあらゆるプラットフォームに対応させるためです。
<7>
 タイトルは必ず書いてください。
これを書かないとブラウザによっては、
WindowにURLが表示されてしまい何となく恥ずかしいです。



back