HTMLを記述しつつサブ窓(showModelessDialog)を開く方法

このQ&Aのポイント
  • HTMLを記述しつつサブ窓(showModelessDialog)を開く方法の質問について説明します。
  • showModelessDialog関数を使用して、複数のGIF画像をサブウィンドウとして開く方法について解説します。
  • IE6限定の環境で、GIF画像をサブウィンドウに表示し、閉じるボタンも追加する方法について説明します。
回答を見る
  • ベストアンサー

HTMLを記述しつつサブ窓(showModelessDialog)を開きたい

背景条件 (1) 複数のGIF画像をサブウィンドウとして開きたい (2) GIF画像のサイズ=300x300固定,サブウィンドウのサイズは500x500固定とする (3) GIFの枚数だけ小窓用HTMLを用意するのは非効率なのでイヤ (4) サブウィンドウに表示させた画像の下には,全て[閉じる]ボタンを用意する (5) サブウィンドウは常に手前で表示したい (6) クライアントの環境はIE6限定 とあります.ここで,(1)(5) を満足する方法としてshowModelessDialogという 関数(?)があることを知りました. さらに(2)を実現するため,JS内にHTMLを書き出す記述を設けようと思いました. WWWにある情報を拾い集め,サンプルを切り貼りしてみたところ, 一応,下記で,スクリプトエラーなく機能しているようには見えます. 誤りやスリム化についてコメントお願いできますと幸いです. <html><head> function openKomado(url,HLP1,HLP2) { var WinD11=showModelessDialog(url,window, 'center:yes;scroll:no;status:no;help:no;edge:raised;dialogWidth:415px;dialogHeight:420px',HLP1,HLP2); WinD11.document.write('<html>\n<head>\n\t<title>'); WinD11.document.write(HLP1); WinD11.document.write('</title>\n</head>\n<body>\n'); WinD11.document.write('\t<img src="'); WinD11.document.write(HLP2); WinD11.document.write('">\n'); WinD11.document.write('\n<center>\n\t<input type="button" name="close" value="閉じる" onclick="window.close();">\n</center>\n</body>\n</html>'); WinD11.document.close(); } </head> <body> <a href="javascript:function voi(){};voi()" onClick="msg1='図'; msg2='image.gif'; openKomado('fig1.gif',msg1,msg2,500,500)">開く</a> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • deadlock
  • ベストアンサー率67% (59/87)
回答No.1

単にwithを使って WinD11.documentを減らしただけです(^^; <script type="text/javascript"> function openKomado(url,HLP1,HLP2) { var WinD11=showModelessDialog(url,window, 'center:yes;scroll:no;status:no;help:no;edge:raised;dialogWidth:415px;dialogHeight:420px',HLP1,HLP2); with (WinD11.document) { write('<html><head><title>' + HLP1 + '</title></head><body>'); write('<img src="' + HLP2 + '">'); write('<center><input type="button" name="close" value="閉じる" onclick="window.close();"></center></body></html>'); close(); } } </script>

関連するQ&A

  • サブウィンドウを表示させたいのですが・・・

    こんにちわ。 ちょっとした(といっても、ワード文書1ページ分)説明をサブウィンドウで表示させたいのですが、 できません。 以下がソースです。 <メインウィンドウ> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function winOpen(winName,url,W,H){ //サブウインドウオープン var WinD11=window.open(url,winName,'scrollbars=1,width='+W+',height='+H+''); WinD11.document.close() } //--> </SCRIPT> </HEAD> <BODY> <A HREF="javascript:function voi(){};voi()" onClick="winOpen('','link1.html',400,200)"> この文字をクリックすると説明ウインドウ1が開きます </A> </BODY> 何が間違ってるのかご指導いただけないでしょうか? よろしくお願いいたします。m(__)m

  • 親ウィンドウのボタンからサブウィンドウを閉じたいのですが・・・。

    いつもお世話になっています。 JavaScript初心者です。 window.closeについて質問させて下さい。 メインウィンドウにある「next」という次のページに移るボタンをクリックすると、開かれているサブウィンドウを閉じる処理を実行したいのですが、window.closeを使えばいいということしか分からず、何をどこに書けば良いのか困っています。(サブウィンドウにも「閉じる」ボタンを作成していますが、親ウィンドウからも操作が出来るようにしたいと思っています。) どうか教えていただけませんでしょうか。 ソースは次の通りです。 ----------------------------- //サブウィンドウの表示 <script language="JavaScript"> function sub(msg){ var page =window.open("", "HintPage","screenX=400,screenY=600,left=400,top=600,width=400,height=250,scrollbars=yes,resizable=yes"); page.document.open(); page.document.writeln("<html>"); page.document.writeln("<head><title>{test}</title></head>"); page.document.writeln("<body leftmargin=\"15\" rightmargin=\"15\" topmargin=\"20\">"); page.document.writeln("<h3>[ {test} ]</h3><hr><br>" + msg + "<br><br><hr><br>"); page.document.writeln("<div align=center>"); page.document.writeln("<input type=button value=close onclick=\"javascript:window.close()\"></div>"); page.document.writeln("</body>"); page.document.writeln("</html>\n"); page.document.close(); page.focus(); } </script> </HEAD> //「next」ボタンの表示 <body> <table cellpadding=3 cellspacing=5 align="right"> <tr> <td bgcolor="#9999ff" align="right"><input type="submit" name="next" value="{nextBtn}" style="width: 140px; height: 20.5px;" onClick="setPname('{next}')" {disabled2}></td></tr> </table> </body> ---------------------------- どうぞよろしくお願い致します。 説明不足の点がありましたら補足させて頂きます。

  • サブウィンドウ関係のコードの改造

    以下に、1、2と二つのHTMがあり、1をベースに、下記の改造をしたいと思います。 (1) 1.htmの小窓を、IEでしか動かないWebページダイアログ(showModelessDialog)でなく、 2.htm にあるような、win.openに変えたいのですが、移植の仕方がわかりません。1.htmをどう書き換えたらいいですか。 (2) 1.htmにあるmyimg.gifの幅(width)を取得して、dialogWidthにセットしたいのですが、その書き方をご教示ください。 高さ(height)は、2.htmにある「getScreenHEIGHT()」をそのまんま流用します。 (3) 1.htm に「href="#"」ありますが、「href="javascript:function voi(){};voi()"」などと記述したほうがいいのでしょうか。 「voi(){};voi()」なんてどこからコピペしてきたキーワードなのか、自分でもわからないのですが。 1.htm ------------------------ <html> <head> <script> function openKomado(url,winTitle) { var Win=showModelessDialog(url,window, 'center:yes;scroll:no;status:no;help:no;edge:raised;dialogWidth:100px;dialogHeight:100px',winTitle); with (Win.document) { write('<html><head><title>' + winTitle + '</title></head><body>'); write('<img src="' + url + '" onclick="window.close();" alt="閉じる">'); close(); } } </script> </head> <body> <a href="#" onClick="openKomado('myimg.gif','題名')">開く</a> </body> </html> 2.htm ------------------------ <html> <head> <script> function openNewWin(url, name){ window.open(url, name, 'scrollbars=yes,top=0,left='+(getScreenWIDTH()-680)+',width='+680+',height='+(getScreenHEIGHT()+20)); } function getScreenHEIGHT(){ if(!!window.screen){ return screen.height-80; }else{ return null; } } function getScreenWIDTH(){ if(!!window.screen){ return screen.width-12; }else{ return null; } } </script> </head> <body> <a href="#" target="new" onClick="openNewWin('./sample.htm','a'); return false;">開く</a> </body> </html>

  • 1ページに大量のWindow.openの最適化方法

    サムネイル下のボタンクリックで拡大写真表示をさせたいと思っています。 現在以下の方法です。 -------------------------- <SCRIPT language="JavaScript"> <!---------------------- function open1(){ wo1=window.open("","WindowOpen1", "toolbar=no,location=no,directories=no,status=no,menubar=yno,scrollbars=no,resizable=no,width=430,height=460"); wo1.document.write("<html><head><title>拡大写真</title>"); wo1.document.write("<script language='JavaScript'> "); wo1.document.write("function good(){ "); wo1.document.write(" window.close() } "); wo1.document.write("</script></head><body><center> "); wo1.document.write("<IMG src='img/03-02/001.jpg' border='0'> "); wo1.document.write("<br><form> "); wo1.document.write("<input type='button' name= 'ok ' value=' Close ' onClick='good()'>"); wo1.document.write("</form></center></body></html> "); wo1.document.close(); } //-----------------> これと <FORM><INPUT type="button" name="no1 " value=" 拡大写真 " onclick="open1()"></FORM> これの組み合わせ --------------------------- で、これがそのページに30個ほど必要なんです。 それぞれ違うのは、もちろん画像だけなんです。 function open1(){~~}を個数分書くしか方法は無いんでしょうか? 何か簡素化する方法があったらお願いします。

  • 半自作cgiが思うように動作しません。

    HTMLページから、$Dataというファイル名を持って来て、 このcgiで、$Data.jpgとなり、 その画像を、新しいウインドウ(サイズ指定)で表示させたいのです。。。 このcgiで新しくウインドウを開き、何かしらをクリックさせてから、サイズ指定のウインドウで画像を表示させるのはできるのですが、 クリックさせずに、しかも、最初に開いたウインドウは勝手に閉じさせたいのですが、 どこをどう直せばいいのでしょうか? #! /usr/bin/perl print "Content-type: text/html\n\n"; $Data = $ENV{'QUERY_STRING'}; $tail = ".jpg"; &header; print "<SCRIPT LANGUAGE='JavaScript'>\n"; print "function newwindow(imgurl) {\n"; print "nwin = window.open('img/$Data$tail\', 'Newwindow','width=300,height=210');\n"; print "nwin.document.open();\n"; print "nwin.document.write(\"<html><head>\")\; \n"; print "nwin.document.write(\"</head><body><img src=\"img/$Data$tail\'>\")\;\n"; print "nwin.document.write(\"<br><INPUT type='BUTTON' value='CLOSE' onclick='window.close()'>\")\; \n"; print "nwin.document.write(\"</body></html>\"); \n"; print "nwin.document.close()\;\n"; print "return false;\n"; print "}\n"; print "</SCRIPT>\n"; print "<BODY onload='window.close()'></body></html>\n"; sub header { print <<"EOM"; <html> <head> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"> <title>$Data</title> </head> EOM }

    • ベストアンサー
    • CGI
  • Insert文がうまく実行されません

    データベースへの書込みを試みています。 先日質問させていただき、この状態で問題なく動いているのですが 入力フィールドを増やすと送信後、send_data.phpのソースが表示されてしまいます。 どなたかよろしくお願いします。 【index.html】 <head><script LANGUAGE="JavaScript"> <!--// function check(){ var strMSG; strMSG = document.search.msg.value; document.open(); document.writeln('<html>\n<head>'); document.writeln('<title></title>'); document.writeln('</head>'); document.writeln('<body>'); document.writeln('<form method="POST" action="send_data.php">'); document.writeln(strMSG); document.writeln('<input type="hidden" name="MSG" value="' + strMSG + '">'); document.writeln('<br>\n<br>\n<input type="submit" value="送信"> '); document.writeln('<input type="button" value="修正" onclick="history.back()">\n</form>'); document.writeln('</body>\n</html>'); document.close(); } //--> </script> </head> <body> <form name="search" method="POST"> ご意見<br> <textarea name="msg"></textarea><br> <input type="button" value=" 確認 " onClick="check()"> <input type=reset value=" 取消 "><br> </form></body> 【send_data.php】 <?php $con = mysql_connect("localhost","root",""); $selectdb = mysql_select_db("bri_db",$con); $sql = "insert into t_research(msg) values('$_POST[MSG]')"; mysql_query($sql,$con); mysql_close($con); ?> <html> <head></head> <body> 完了<br> <a href="index.html">続けて入力 </body> </html>

    • ベストアンサー
    • PHP
  • タグ組み、教えて下さい。

    ランダムにメッセージを表示する・・というのに挑戦中ですが、メッセージが出ません。 私の作ったソースは、こういうのです↓ ************************************************** <html> <head><title>占いの館^_^</title></head> <body background="image/0023.jpg"text="#000000"> <table><tr><td><img src="image/0024.gif"wigth="239"height="467"></td><td align="middle"> <SCRIPT language="JavaScript"> msg=new Array(); msg[0]="大吉"; msg[1]="中吉"; msg[2]="小吉"; msg[3]="吉"; msg[4]="凶"; i=Math.floor(Math.random() * msg.length); document.write(msg[i]);      </SCRIPT>   </td></tr></table> </center></body></html> ************************************************** 間違いが分からなくて、詰まってます>_< よろしくお願いします。。。

  • フォームからのデータ送信について

    プログラミングの初心者です。 以下のソースでフォーム画面を作成しました。 これでデータベースへの書き込みができるのかどうかを教えてください。 よろしくお願いします。 <head> <script LANGUAGE="JavaScript"> <!--// function check(){ var strMSG; strMSG = document.search.MSG.value; document.open(); document.writeln('<html>\n<head>'); document.writeln('<title>送信内容確認</title>'); document.writeln('</head>'); document.writeln('<body>'); document.writeln('<form method="POST" action="send_data.php">'); document.writeln(Rsei); document.writeln(strMSG); document.writeln('<br>\n<br>\n<input type="submit" value="送 信"> '); document.writeln('<input type="button" value="修 正" onclick="history.back()">\n</form>'); document.writeln('</body>\n</html>'); document.close(); } //--> </script> </head> <body> <form name="search" method="POST"> ご意見お聞かせください<br> <textarea name="MSG"></textarea><br> <input type="button" value=" 確認 " onClick="check()"> <input type=reset value=" 取消 "><br> </form> </body> send_data.phpは以下の通りです。 <?php $con = mysql_connect("localhost","root",""); $selectdb = mysql_select_db("test",$con); $sql = "insert into table(msg) values('$_POST[MSG]')"; $result = mysql_query($sql,$con); mysql_free_result($result); mysql_close($con); ?> <html> <head><title>送信終了</title></head> <body>送信完了しました</body></html>

    • ベストアンサー
    • PHP
  • document.writeについて

    document.writeについて document.writeのテキストで文字を表示するじゃんけんゲームを作っています。 文字をグーを表示させると全画面がきえてしまいます。 消えない様にその場所のみ替えるようするには、どうしたらよいでしょうか? また、document.writeで一旦表示されたらものをそこだけ消す 表示方法なども教えて下さい。 <script language="JavaScript"> <!-- function msg() { document.write("グー!"); } function msg2() { document.write("<br>チョキ!"); } function msg3() { document.write("<br>パー!"); } //--> </script> </head> <body> <br><br><br><br><br><br> <p onMouseup="msg()">グー</p><p onMouseup="msg2()">チョキ</p><p onMouseup="msg3()">パー</p> </body>

  • 変数を送る方法?(CGIの「**.cgi?mode=00&name=aa.jpg」的な物)

    1ページに複数の画像があり、画像クリックで拡大写真を小窓で開くようにしたいです。 枚数分ページ(htmlファイル)を準備するのは避けたいです。自動生成の方でやりたいと思います。 その際、少しでも入力を減らしたいと思うのですが… 現在は以下のようになっています。 --- <SCRIPT language="JavaScript"> <!-- function wopen1(){ wo1=window.open("","WindowOpen1", "width=800,height=700"); wo1.document.write("<html><head><title>画像名</title>"); wo1.document.write("<script language='JavaScript'>"); wo1.document.write("function good(){"); wo1.document.write("window.close() }"); wo1.document.write("</script>\n</head>\n<body>"); wo1.document.write("写真名-コメント"); wo1.document.write("<IMG src='写真パス'>"); wo1.document.write("<center>"); wo1.document.write("<form>"); wo1.document.write("<input type='button' name= 'ok ' value=' Close ' onClick='good()'>"); wo1.document.write("</form>"); wo1.document.write("</center>\n</body>\n</html>"); wo1.document.close(); } (これが写真枚数分) これと、 <A href="javascript:void(0)" onclick="wopen1()"><IMG src="サムネイルパス"~ これの組み合わせです。 これを、 wo1.document.write("<html><head><title>[CGIで言う所の$name的な表現]</title>"); と <A href="javascript:void(0)" onclick="wopen1([CGIで言う所の?name=00&pict=01.jpg的な表現])"><IMG src="写真サムネイルパス"~ で済ませたいのですが、可能でしょうか? その場合、どのように記述したらいいのでしょうか? 出来ればピンポイントで教えていただけるとありがたいのですが… よろしくお願いします。