【Javascript】JavaScript Examples　サブウインドウの位置等を指定

現在のページは開いたままで、参照ページを別のウインドウへ表示したいというのは良くあることだ。こんな時、リンクから新しいウインドウを開くには、HTML なら

　<a href="http://game.gr.jp/ok.htm" target="subwin">サンプル１</a>

　★サンプル１

こうやって、target属性を指定すると良い。でも、開くウインドウのサイズや位置やもろもろの指定をしたいなら JavaScript の出番となるのだ。たとえば、

　<a href="javascript:void(0)"
　　 onClick="window.open('http://game.gr.jp/ok.htm','subwin')">サンプル２</a>

　★サンプル２

と書くと、とりあえず target で指定したのと同じ動作をするが、さらに、open の中へ ,'width=300,height=300' を付け加えて...

　<a href="javascript:void(0)"
　　 onClick="window.open('http://game.gr.jp/ok.htm','subwin','width=300,height=300')">サンプル３</a>

　★サンプル３

と書くと、幅300高さ300ピクセルのサブウインドウが開いてくれる。しかも、ブラウザの顔であるボタン類やメニューバーも無くなっていることに気づいただろうか? それらを追加したい時は, 'width=300,height=300' のところへ「,」で区切りながら次の文字を加えてあげれば良いだけだ。

　toolbar　　　=1　//ツールバー有り
　location　　 =1　//ロケーションバー有り
　directories　=1　//ディレクトリバー有り
　status　　　 =1　//ステータスバー有り
　menubar　　 =1　//メニューバー有り
　scrollbars　 =1　//スクロールバー有り
　resizable　　=1　//リサイズ可能

たとえば、ツールバー付き幅300高さ300のサブウインドウなら 'width=300,height=300' のところが、

　'width=300,height=300,toolbar=1'

　★サンプル４

となる。
そしてさらに、サブウインドウの出現位置をたとえば、画面左から 10px、上から 50px に指定したい時は、

　'width=300,height=300,toolbar=1,left=10,top=50'

　★サンプル５

と書けば良い。ただし、この位置指定は NN4/IE4 以降でしか機能しないが使えないブラウザでもエラーが出ることは無いから安心して使える機能の一つだ。