第 IV 部 Web開発 FAQ - POPUP・プロンプトに関するTips

POPUP・プロンプトに関することを教えてください。

動的なPOPUP・プロンプトを生成するには、次のJavaScriptにありますように、
URLとしてCGIをコールします。cgiへのパスに加えて引数を付加することも可能です。

function PMTWIN(){window.open("/cgi-bin/DSPPROMPT","PROMPT",
   "toolbar=no,location=no,directories=no,status=no,menubar=no,
     scrollbars=auto,resizable=yes,width=270,height=285") }

eStudioが生成する「POPUP表示」などのソースでも確認することができます。

なお、このソースに手を加え、文字列や画像からPOPUP、プロンプトを出現させる場合は若干、
注意が必要です。

<a href="javascript:window.open("/cgi-bin/DSPPROMPT","PROMPT",
  "toolbar=no,location=no,directories=no,status=no,menubar=no,
     scrollbars=auto,resizable=yes,width=270,height=285")">
      リンク元文字列・画像</a>

これでは <a>タグの「href」属性と認識されるのは、最初のダブルクォートで囲まれた部分、
つまり"javascript:window.open("のみとなってしまい、リンク元をクリックしても実行エラーとなるでしょう。

これは「href」属性、JavaScript記述ともにダブルクォートを使用しているために生じるものです。 JavaScriptの方をシングルクォートで区切ることで適切なhref属性を渡すことができます。

<a href="javascript:window.open( '/cgi-bin/DSPPROMPT ' , ' PROMPT ' ,
  ' toolbar=no,location=no,directories=no,status=no,menubar=no,
    scrollbars=auto,resizable=yes,width=270,height=285 ' )">
      リンク元文字列・画像</a>

なお、このような構文でリンク元文字列・画像をクリックした際、元の画面が白くなってしまい [object] という文字のみが表示される場合は、次の方法で回避することができます。

ヘッダ部分（<head>～</head>）に共用スクリプトとして

<script Language="Javascript">
  function openwindow(uri,nm,x,y) {
    window.open(uri,nm,x,y);
  }
</script>

をあらかじめ記述し、リンク部分は

<a href="javascript:openwindow('/cgi-bin/DSPPROMPT','PROMPT',
   'width=270,height=285')">
     リンク元文字列・画像</a>

と記述します。
リンク指示部分の内容に従い、uriに「/cgi-bin/DSPPROMPT」、nmに「PROMPT」が代入された形で
幅270px、高さ285pxのポップアップウィンドウがオープンします。
つまり、リンク指示部分にて

オープン先URL
ポップアップウィンドウ名
ウィンドウサイズ（幅、高）

をそれぞれ適したものに指定することになります。