【JavaScript】入門12. JavaScriptで新しいWindowを開く

こんにちは（・∀・）

以前jQuery入門でもやりました【jQuery】入門7. jQueryで新しいWindowを開くのJavaScript版です。window.open()メソッドで新しいWindowを開きます。

ポップアップウィンドウを無効にしている場合正しく動作しません。

こちらのサンプルは2010/02/07に投稿した「JavaScriptで新しいウィンドウを開く(ページ削除済み)」のサンプルを一部修正して再掲載したものとなります。

Contents

1. 新しいWindowを開く際の設定
2. 新しいウィンドウを開く
3. 新しいウィンドウを画面中央に開く

新しいWindowを開く際の設定

window.open()メソッドを使用して新しいWindowを開く設定をします。

window.open(①url,②name,③詳細);④return false;

1. urlを記述
2. 名前を記述(_blankや_selfなどのターゲット属性値かウィンドウ名を指定)
3. 新しいWindowを開く際に表示するスタイルを指定(カンマで区切って複数指定できます)
4. a要素に直接記述する場合return falseでa要素を無効化

新しいWindowを開く際に③詳細で指定できる設定は次の通りです。

ウィンドウの位置

Topから50px、Leftから50pxの位置に表示したい場合はtop=50、left=50と記述。
　top=50
　left=50

ウィンドウのサイズ

width500px、height500pxにしたい場合はwidth=500、height=500と記述。
　width=500
　height=500

ツールバーやメニューバーの有無

0で無し、1で有り、またはnoで無し、yesで有り。
　toolbar=0
　location=0
　directories=0
　status=1
　menubar=0
　scrollbars=1

ウィンドウのサイズ変更

0で不可、1で可、またはnoで不可、yesで可。
　resizable=0

ちなみにサンプルではHTMLとスクリプトは切り離してありますが、インラインで記述する場合は次のようになります。

<a href="javascript:void(0)" onclick="window.open('index.html','_blank','top=50,left=50,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1');return false;">Demo</a>

1. 新しいウィンドウを開く

通常の新しいウィンドウの開き方。

HTML

<button id="demo1">Demo1</button>

JavaScript

function nw() {
window.open('index.html','_blank','top=50,left=50,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1');
}
var o = document.getElementById('demo1');
o.addEventListener('click',nw,false);

Result

2. 新しいウィンドウを画面中央に開く

画面中央に新しいウィンドウを開く方法

HTML

<button id="demo2">Demo2</button>

JavaScript

function nw2() {
window.open('index.html','_blank','width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1,left='+(window.screen.width-500)/2+',top='+(window.screen.height-500)/2);
}
var o = document.getElementById('demo2');
o.addEventListener('click',nw2,false);

Result

いかがでしたでしょうか、新しくウィンドウを開く際の位置や画面サイズなどもJavaScriptで調整することができます。以上JavaScriptで新しいウィンドウを開くサンプルでした。

関連リンク

JavaScript入門
jQuery入門