サブウィンドウを表示するJavaScript入門

  1. HOME
  2. JavaScript入門
  3. サブウィンドウを表示する

ここでは、JavaScriptでサブウィンドウを表示する方法について解説します。 HTMLでも別ウィンドウは出せますが、 JavaScriptを利用するとウィンドウの位置や大きさを指定できます。 何かと使い道の多いスクリプトですので、是非マスターして下さい。

普通にサブウィンドウを表示する

サブウィンドウを表示するには、以下のように記述します。

window.open("URL","ウィンドウ名")
指定したウィンドウ名でサブウィンドウを表示させます

ウィンドウ名は、HTMLのターゲット名と同じです。 同じウィンドウ名を指定すると、そのウィンドウに指定したページが表示されます。 ウィンドウ名を空にすると、target="_blank"と同じことになります。

サブウィンドウを開くサンプル

HTMLに以下のように記述してみてください。

<script>
function winOpen(){
  window.open("../index.html","sub");
}
</script>

<form>
<input type="button" value="別窓" onclick="winOpen()">
</form>

←サンプル

上記ボタンを押すと、1つ上の階層のindex.html、 ここではJavaScript入門のTOPページが表示されます。

サンプルの解説

function winOpen(){
  window.open("../index.html","sub");
}

まず、JavaScriptの関数winOpen()を見てみましょう。中は1行だけです。window.open()がサブウィンドウを表示するスクリプトでした。

window.open()のカッコ内の最初の項目が、表示するURLです。ここでは、このページの一つ上の階層のindex.html、すなわちJavaScript入門のトップページを指定しています。

2つ目の項目ウィンドウ名です。任意に付けることができますが、今回は「sub」にしました。既にsubという名称のウィンドウが表示されていればそのウィンドウに、無ければ新たにウィンドウを作成してそこに第一引数で指定したページを表示します。

<form>
<input type="button" value="別窓" onclick="winOpen()">
</form>

あとは、ボタンのonclickイベントで関数winOpen()を呼び出しています。

汎用性を持たせる

外部ファイルでwindow.open()を用いる場合、以下のようにして汎用性を持たせる事ができます。

function winOpen(jpURL){
  window.open( jpURL , "" );

}

こうしておいて、関数を呼び出すときにwinOpen("../index.html")のようにします。関数の引数を変えることで、どんなページでも表示することができます。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers