JavaScript window.open

JavaScriptでWebブラウザを新たに別ウィンドウまたは別タグで開くには、window.open メソッドを使います。この記事では、ウェブブラウザの開き方をサンプルを交えてご紹介します。

概要

openメソッドは新たにウィンドウを開いて、そのウィンドウオブジェクトを返す。

ページ読み込み時や非同期通信(Ajax)後のように、ユーザ操作に関係ないときにwindow.openでウィンドウを開こうとすると、ブラウザによってはポップアップブロックされてウィンドウが開かないことがある。

構文

window.open(url, name [,option])

open(url, name [,option])

url

表示するページのURL

name

ウィンドウの名前

option

ウィンドウのオプション。カンマで区切って複数指定できる。

window.openのオプション

オプション	説明
directories	ディレクトリバーの有無(yes|no)
height	ウィンドウの高さ(ピクセル単位)
left	ウィンドウの左位置
location	アドレスバーの有無(yes|no) セキュリティ上の理由により、この機能が無効なブラウザもある。
menubar	メニューバーの有無(yes|no)
resizable	ウィンドウサイズ変更の可否(yes|no)
scrollbar	スクロールバーの有無(yes|no)
status	ステータスバーの有無(yes|no)
toolbar	ツールバーの有無(yes|no)
top	ウィンドウの上位置
width	ウィンドウの幅(ピクセル単位)

戻り値

ウィンドウの生成に成功した場合は、新しく開かれたウィンドウのwindowオブジェクトを返す。ウィンドウの生成に失敗した場合はnullを返す。

例

<button id="open1">ウィンドウを開く</button>

<script>
  function example(element, url, name) {
    element.addEventListener("click", function(){
      window.open(url, name)
    })
  }
  example(document.getElementById("open"), "https://segakuin.com/", "win1")
</script>

ボタンを開くと、ホームページを別タブで開きます。