教えて!新規ウィンドウを開くプログラムについて

このQ&Aのポイント
  • JavaScript初心者の質問。メインウィンドウの「Reference」という文字列をクリックすると新規ウィンドウが開き、別ページのフォームから入力したURLの内容が表示されるプログラムの仕様変更方法を教えてください。
  • ウィンドウを指定したサイズ、配置で開くようにしたいです。IEの場合はフォーカスがメインウィンドウに移っても常に手前に表示されるようにしたいです。試行錯誤しましたが解決方法が分かりません。
  • 使用言語はPerlです。$rutmpと$refMsgという変数を使用し、JavaScript内で新規ウィンドウを表示しています。
回答を見る
  • ベストアンサー

教えて下さい!新規ウィンドウを開くプログラムについて

いつもお世話になります。JavaScript初心者です。 メインウィンドウの「Reference」という文字列をクリックすると新規ウィンドウが開き、そこに別ページのフォームから入力したURLの内容が表示されるというプログラムを、この度下記の仕様に変更することになりました。 1)ウィンドウを指定したサイズ、配置で開くようにしたい。 2)IEの場合はフォーカスがメインウィンドウに移っても常に手前に表示されるようにしたい。 あれこれ試行錯誤しましたが当方知識不足のため、具体的な解決方法が見つからず上手く行きません。 作成したプログラムの修正点をお伺いしたく、こちらを利用させて頂いています。 どうぞよろしくお願い致します。 ------------------------------------------------- 《リンク元》使用言語はPerlです。 if($rutmp ne ""){ $ref .= "<div align=right><a href=\"javascript:rePreview(\'$rutmp\')\">$refMsg</a></div>"; } ※$rutmpはフォームから入力した任意のURL、$refMsgは文字列"Reference"が入ります。  div~divはhtmlファイル内のJavascript内に打ち出すことを想定しています。 ------------------------------------------ 《新規ウィンドウ表示》htmlファイル内のJavascriptです。 var rpage; function rePreview(url){ var ua = navigator.userAgent; if (ua.match(/MSIE (\d\.\d+)/)){ //IEの処理 rpage=showModelessDialog(url,window,"status:false;dialogWidth:400px;dialogHeight:250px;dialogTop:580px;dialogLeft:400px;scrollbars:yes;resizable:yes;"); rpage.document.open(); rpage.document.writeln("<html>"); rpage.document.writeln("<head><title></title></head>"); rpage.document.writeln("<body>"); rpage.document.writeln("</body>"); rpage.document.writeln("</html>\n"); rpage.document.close(); rpage.focus(); } } else { //その他ブラウザの処理 rpage =window.open(url, "referencePage","screenX=400,screenY=600,left=400,top=600,width=400,height=250,scrollbars=yes,resizable=yes"); rpage.document.open(); rpage.document.writeln("<html>"); rpage.document.writeln("<head><title></title></head>"); rpage.document.writeln("<body>"); rpage.document.writeln("</body>"); rpage.document.writeln("</html>\n"); rpage.document.close(); rpage.focus(); } }

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

  • ベストアンサー
  • arexis
  • ベストアンサー率66% (66/99)
回答No.2

いえいえ^^; 白紙の件ですが、そこのスクリプトの矛盾点を見落としていました。 URLを指定してウィンドウを開いてるのでIE用もNN用も with(rpage.document){ open(); writeln("<html>"); writeln("<head><title></title></head>"); writeln("<body>"); writeln("</body>"); writeln("</html>\n"); close(); } この部分は不要です。 IEでshowModelessDialogを使うのであればIEの方はrpage.focus()も無くても良いかな?と思います。 showModelessDialogに関しては仕様だと思います。かなり昔にModalの方を使って以来使ってないのであまり覚えていませんが、一度開くとコンテンツの書換えは不可かもしれません。 ソフトのHelpシステムやFAQリストの様な形で使う物で、普通のブラウザ画面として使うのはちょっと使い方は違うかもしれませんね。

ko_kawauso
質問者

お礼

arexis様 昨日は回答ありがとうございました。 先程、アドバイス通りプログラムを書き換えてみたら、NNでもスムーズに表示されました! とても助かりました。 また何かありましたらどうぞよろしくお願い致します。

ko_kawauso
質問者

補足

arexis様 毎度お世話になります。 なるほど、URLを指定している場合は上記の部分は不要なのですね。 まだまだ勉強不足です^_^; 早速明日、職場で動作確認をしてみます。 showModelessDialogの件もご回答頂いてありがとうございますm(__)m 「常に前面にする」ことを優先して使ってしまいましたがブラウザ画面として使うには限界があるようですね。検討してみます。 毎回丁寧に答えて下さって本当に感謝しています。 ありがとうございます。

その他の回答 (1)

  • arexis
  • ベストアンサー率66% (66/99)
回答No.1

これは稼動してるんですよね? >1)ウィンドウを指定したサイズ、配置で開くようにしたい。 >2)IEの場合はフォーカスがメインウィンドウに移っても常に手前に表示されるようにしたい。 1の『指定』はPerlスクリプト内で設定と言う事で良いですよね。 2に関してはIE用にshowModelessDialogを使ってるのでそのままで。 Perl内のDIV打ち出しは if($rutmp ne ""){ $ref .= "<div align=right><a href=\"javascript:rePreview(\'$rutmp\',400,250,580,400)\">$refMsg</a></div>"; } この数字部分は左から 幅、高さ、スクリーン上の上からの位置、スクリーン上の左からの位置 です。 JavaScriptの方は、ほとんど変えてません。 受け取った、4箇所の数値指定に引数をあててるだけです。 var rpage; function rePreview(url,W,H,T,L){ var ua = navigator.userAgent; if (ua.match(/MSIE (\d\.\d+)/)){ //IEの処理 rpage=showModelessDialog(url,window,"status:false;dialogWidth:" + W + "px;dialogHeight:"+H+"px;dialogTop:"+T+"px;dialogLeft:"+L+"px;scrollbars:yes;resizable:yes;"); with(rpage.document){ open(); writeln("<html>"); writeln("<head><title></title></head>"); writeln("<body>"); writeln("</body>"); writeln("</html>\n"); close(); } rpage.focus(); }else{ //その他ブラウザの処理 rpage =window.open(url, "referencePage","screenX="+L+",screenY="+T+",left="+L+",top="+T+",width="+W+",height="+H+",scrollbars=yes,resizable=yes"); with(rpage.document){ open(); writeln("<html>"); writeln("<head><title></title></head>"); writeln("<body>"); writeln("</body>"); writeln("</html>\n"); close(); } rpage.focus(); } }

ko_kawauso
質問者

お礼

arexis様 毎回ありがとうございます。 お返事遅くなりましてすみません。 質問の元プログラムは稼動中です。 アドバイス通り書き換えたところ、IEではスムーズに動きました。 ただ、IE以外の場合(NN7.1で確認しました)ウィンドウ枠は表示されるのですが中身が白紙の状態になっており、window.openのurlを認識していない状態です。 こちらの環境の問題でしょうか? 後、本題とは少しそれますがshowModelessDialogの場合、リンク先へ飛ぶと新規ウィンドウが表示されてしまいます。これを新規ウィンドウを作らない方法はないものでしょうか?そもそもこういう場所でshowModelessDialogを使うのが適切ではないのでしょうか? 面倒であれば後者の質問は無視して頂いて結構です。 よろしければ引き続きよろしくお願い致します。

関連するQ&A

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

    いつもお世話になっています。 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> ---------------------------- どうぞよろしくお願い致します。 説明不足の点がありましたら補足させて頂きます。

  • 別ウインドウを開くようにしてるのですが

    こんにちは HPで画像を開く際に、下のようなjavascriptを使っています。 <SCRIPT Language="JavaScript"> <!-- function openwin(url) { /* 横幅400px、縦幅200pxのウインドウを開く */ w = window.open(url, 'win','width=400,height=200,status=no,scrollbars=yes,directories=no,menubar=no,resizable=yes,toolbar=no'); } //--> </SCRIPT> body部分に <a href="javascript:openwin('abc.htm')">いろは </a> としています。 で、お教え願いたいのは、別のサイズのウインドウにしたいときはどうしたらいいのでしょうか? 普段は400×200でいいのですが、たまに400×400にしたいときがあります。 方法を教えてくださいませ よろしくお願いいたします。

  • 子ウィンドウから子ウィンドウ

    子ウィンドウから文字をクリックして、 同じ大きさの子ウィンドウを開かせたいのですが、 下記のJavaScriptでは子ウィンドウが開きません。 子ウィンドウから子ウィンドウを開かせるには どのようにしたらいいのでしょうか? ご回答宜しくお願い致します。 head内は、 <script type="text/javascript"><!-- function subwin(file){ window.open(file,"subwin","resizable=1, width=600, height=500, scrollbars=yes"); } //--></script> body内の呼び出し部分は、 <a href="ファイルのURL" onclick="subwin('ファイルのURL'); return false;">

  • 開いたウインドーの、ハンドルはどこに?

     ウインドー、オープンは、できたのですが、  その新ウインドーの要素・   エレメントの、ハンドルがわかりません。  オープンした返値、 Widが、 別ウインドーのハンドルじゃ、ないのでしょうか  親ウインドーから、新ウインドーの内容を読み出したいのです。   <html> <head> <script language="JavaScript" type="text/javascript"> wid = window.open("http://kikitai.teacup.com/205/c221.html"); var taglist = ""; for (i = 0; i < wid.document.all.length; i++) { taglist += wid.document.all(i).tagName; taglist += " "; } //tx_hd = wid.prompt( taglist, ); document.writeln("<pre>"); document.writeln("AAA"); document.writeln(taglist ); document.writeln("AAA"); document.writeln(wid ); document.writeln("</pre>"); </script> </head> <body> オープンウインドー テスト<br> </body> </html>

  • javascriptで別ウインドウを開いたのですが背景設置が上手くいきません。

    いつもお世話になっております。 JavaScriptを使用し別ウインドウで画像を表示させているのですが、 そのウインドウの背景が上手く設定できません。 どのように編集すればよいでしょうか? 現在の状態は以下の通りです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>aaa</title> <script language="javascript"> <!-- function OpenWindow(){ var width = document.images['00'].width + 228; var height = document.images['00'].height +254; subWin = window.open("","subWin","status=no,menubar=no,toolbar=no,scrollbars=no,resizable=yes,screenX=0,screenY=0,width=" + width + ",height=" + height + '"'); with(subWin.document) { open(); write("<html><head><title>sample1</title></head>"); write("<body onload='window.resizeTo( document.images[00].width + 40,document.images[00].height + 120)'><div align='center'><img id='00' src='b/1b.jpg'><br>"); write("<button type='button' onclick='window.close()'>閉じる</button></body></div></html>"); close(); } } --> </script></head> 宜しくお願いします。

  • 子ウインドウのスタイルについて

    すみません、分かる方、教えてください。 次のようにJSP内のJavaScriptの関数にて、スタイルを指定しても子ウインドウがサイズ変更できてしまいます。 var style = "width=630,height=400,resizable=0, location=0, menubar=0,scrollbars=yes"; WindowObject = window.open(url,"MAIN",style); resizable=noとしても同様でした。scrollbars=noとした場合はスクロールバーなしとなるのですが何故でしょうか?

  • 読みこみと同時にポップアップウインドウを表示したい

    URL(たとえば1.tml)を指定してページを読み込んだときにそのページと同時にポップアップウインドウを表示したいと思っています。 そこで1.htmlには下記のように書きましたが、ポップアップが出ません。どなたかおわかりになる方、ご教授ください。よろしくお願いします。 <HTML> <HEAD> <script type="text/javascript"> <!-- function MM_openBrWindow() { window.open("pop.html","width=400,height=400,status=no,scrollbars=yes,resizable=no"); } //--> </script> </HEAD> <boby onload="MM_openBrWindow()"> </body> </HTML>

  • 投稿画像の確認画面

    下記は画像を投稿したとき投稿画像を確認するPerlコードです、 別画面に投稿した画像が表示されたのですが最近画像が表示されなくなりました、何処か間違っているのか分かりませんよろしくお願いします。 <SCRIPT language="JavaScript"> <!-- var CR = "\\r"; var LF = "\\n"; var tag_change; var amp_change; var space_change; function check2(Form1){ var new2 = window.open('','new2','scrollbars=yes, resizable=1, WIDTH=100, HEIGHT=100'); new2.moveTo(0,0); new2.resizeTo(700,800); new2.focus(); whole = 2; h_mode = 1; space_change = 1; tag_change = 1; amp_change = 1; honbun = 1; new2.document.writeln("<HTML lang='ja'>"); new2.document.writeln("<HEAD>"); new2.document.writeln("<META HTTP-EQUIV=\\"Content-Script-Type\\" CONTENT=\\"text/javascript\\">"); new2.document.writeln("<TITLE>画像コメント確認<"+"/TITLE>"); new2.document.writeln("<"+"/HEAD>"); new2.document.writeln("<BODY BACKGROUND='./kabe/k2.gif'>"); new2.document.writeln("<FONT SIZE=4 COLOR='NAVY'>"); idata = window.document.Form1.pr.value; new2.document.writeln(lineX(idata)); new2.document.writeln("<"+"/FONT>"); new2.document.writeln("<CENTER>"); imag = "file:///" + document.Form1.file_1.value.replace(/\\\\/g, '/'); new2.document.writeln("<img src=\\""+imag+"\\" alt='画像がありません'>"); new2.document.writeln("<"+"/CENTER>"); new2.document.writeln("<SCRIPT type='text/javascript'>"); new2.document.writeln("<!-"+"-"); new2.document.writeln("var sw = confirm('画像、コメントOKですか?');"); new2.document.writeln("<"+"/SCRIPT>"); new2.document.writeln("<"+"/BODY>"); new2.document.writeln("<"+"/HTML>"); new2.document.close(); if (sw = new2.sw) { new2.close(); // new2 はレスと画像を確認したwindow var new1 = window.open('','new1', 'width=50, height=50,resizable=1'); new1.close(); } else { new2.close(); // new1 は画像確認したwindow var new1 = window.open('','new1', 'width=50, height=50,resizable=1'); new1.close(); } return sw; }

  • アラートをクリックした後、別ウインドウを閉じる

    下記はCGIのフォームから画像を送信する時、別ウインドウに画像を表示して、アラートでOKかキャンセルかを確認するJavaScriptです、 OKの場合別ウインドウを自動的に閉じたいのですが、 print <<"END_HERE"; <SCRIPT language="JavaScript"> <!-- function check() { imag = "file:///"+document.Form1.file_1.value.replace(/\\\\/g, '/'); var new1 = window.open('','new1', 'width=500, height=400'); new1.document.writeln("<HTML lang='ja'>"); new1.document.writeln("<HEAD>"); new1.document.writeln("<META HTTP-EQUIV=\\"Content-Script-Type\\" CONTENT=\\"text/javascript\\">"); new1.document.writeln("<TITLE>画像確認<"+"/TITLE>"); new1.document.writeln("<"+"/HEAD>"); new1.document.writeln("<BODY ><CENTER>"); new1.document.writeln("<img src=\\""+imag+"\\">"); new1.document.writeln("<SCRIPT type='text/javascript'>"); new1.document.writeln("<!-"+"-"); new1.document.writeln("var conf = confirm('この画像でOKですか?');"); new1.document.writeln("//-"+"->"); new1.document.writeln("<"+"/SCRIPT>"); new1.document.writeln("<"+"/CENTER>"); new1.document.writeln("<"+"/BODY>"); new1.document.writeln("<"+"/HTML>"); new1.document.close(); return new1.conf; } //--> </SCRIPT> END_HERE よろしくお願いします。

  • 閉じる「×」のないウインドウの作り方

    下記のようなウインドウもしくは、全く形式の?のウインドウでもけっこうですが、右上の閉じる「×」もないウインドウはどのように作れますか? <SCRIPT language=JavaScript> window.open("sample.htm","plan","width=600,height=600,scrollbars=1,menubar=no,resizable=yes,left=10,top=10"); </SCRIPT>