#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › open-close

Window open-close

ウィンドウを開く・閉じる

ウインドウを開く

window.open() というメソッドで新しいウィンドウを生成します。HP上でよく見かけるJavaScriptを使った小技です。
JavaScriptが有効の場合は小窓、無効または実装されていない場合は普通のハイパーリンクで開きます。


例1-1:
<a href="url" onClick="window.open('url', 'name', 'features'); return false;">ウィンドウを開く</a>


例1-2:
<input type="button" value="ウィンドウを開く" onClick="window.open('url', 'name', 'features')">
例1-1:ウィンドウを開く1-1
例1-2:

上記を開いて確認して下さい。

url は新しいウィンドウに表示するページのURLです。
name _blankや_selfなどのターゲット属性値かウィンドウ名を指定し、指定する時は引用符で括ります。 ウィンドウ名を設定しておくと、各リンク先のページを同一のウィンドウに表示することができます。 (省略可)
features はウィンドウのサイズなどのオプションを指定します。複数のパラメーターをカンマで区切って指定し、全体を引用符で括ります。 (省略可)

ウィンドウに設定できるパラメーター(複数指定する場合は , カンマで区切ってください。)

パラメーター 説明
width= ウィンドウの横幅 数値
height= ウィンドウの縦幅 数値
top= ウィンドウ表示位置のy座標を指定 数値
left= ウィンドウ表示位置のx座標を指定 数値
menubar= メニューバー表示の有無 yes/no,1/0
toolbar= ツールバー表示の有無 yes/no,1/0
location= アドレスバー表示の有無 yes/no,1/0
status= ステータスバー表示の有無 yes/no,1/0
scrollbars= スクロールバー表示の有無 yes/no,1/0
resizable= ウィンドウサイズ変更の許可 yes/no,1/0

ウィンドウを閉じる

window.close() というメソッドで、現在のウィンドウまたはそのページ上で呼び出されたウィンドウを閉じます。
但し、セキュリティ上の理由により、window.open() メソッドで開かれたウィンドウ以外 閉じることはできません 。


例2-1:
<a href="#" onClick="window.close(); return false;">ウィンドウを閉じる</a>


例2-2:
<input type="button" value="ウィンドウを閉じる" onClick="window.close()">

例2-1:ウィンドウを開く2-1
例2-2:

上記を開いて確認して下さい。