ywork2020.com

Title

ファイルをブラウザのウィンドウで開く

目次 (INDEX)

window とは

ここで説明する window とは次の語句からなる javascript のグローバル変数であり、Window オブジェクトを参照します。
window
読み: ウィンドウ
意味: 窓

open とは

ここで説明する open とは次の語句からなる javascript のメソッドです。
open
読み: オープン
意味: 開く

目次に戻る

Window.open メソッドの概要

このメソッドは、引数に与えた URL のファイルをブラウザのウィンドウで開きます。

また、引数のオプションを使用することで、ウィンドウの開き方やサイズ、またセキュリティなどの設定をすることも可能です。

Window オブジェクトは window 変数から参照します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

window.open(strUrl [, strWindowName [, strWindowFeatures ]])

このメソッドには引数が三つありますが、必須なのは 「 strUrl 」 だけです。 他の 「 strWindowName 」 と 「 strWindowFeatures 」 はオプションなので必要があれば利用することになります。 「 strWindowFeatures 」に関しては複数の設定をカンマ区切りで列挙することができます。

また、三つの引数は string ( 文字型 ) で指定する必要がありますので、 値はダブルクォーテーションかシングルクォーテーションで囲ってください。

目次に戻る

サンプル: 引数 (strUrl) 指定した URL を新しい副ウィンドウで開く

このサンプルは URL 、または相対パスで指定したファイルを新しいタブ ( 新しい副ウィンドウ ) で開きます。

コードの記述としては window.open() の引数に任意の URL を与えるだけです。

サンプルコード: HTML
<body>
	<input type="button" value="ボタン" onclick="evtName_NewTab()">
</body>
  • 02: input 要素 button 型 (クリックするとevtName_NewTab()関数を呼び出す)
サンプルコード: script
<script>
	function evtName_NewTab(){
		window.open("URL");
	}
</script>
  • 02: 関数の作成 (evtName_NewTab という名前の関数を作成)
  • 03: 関数内の処理 (window.open でウィンドウを開く)
実行結果:

実行:

目次に戻る

サンプル: 引数 (strUrl + strWindowName) 指定した URL を同じタブで開く

このサンプルはURL、または相対パスで指定したファイルを同じタブ ( 同じ副ウィンドウ ) で開きます。

コードの記述としては window.open() の引数に任意の URL と strWindowName に "_self" を与えます。

"_self"は HTML の a 要素 に使われる target 属性 の値ですが、strWindowName にこの特殊な値を指定することで target 属性と同じ働きをさせることができます。 もちろん target 属性の他の値も利用できますので "_blank" を指定すれば新しいタブで開くことを明示することもできます。

サンプルコード: HTML
<body>
	<input type="button" value="ボタン" onclick="evtName_ThisTab()">
</body>
  • 02: input 要素 button 型 (クリックすると evtName_ThisTab() 関数を呼び出す)
サンプルコード: script
<script>
	function evtName_ThisTab(){
		window.open("URL", "_self");
	}
</script>
  • 02: 関数の作成 (evtName_ThisTab という名前の関数を作成)
  • 03: 関数内の処理 (window.open でウィンドウを開く)
実行結果:

実行:

目次に戻る

サンプル: 引数 (strUrl + strWindowFeatures) 指定した URL を新しいウィンドウで開く

このサンプルは指定した URL 、または相対パスで指定したファイルを新しいウィンドウで開きます。

オプションの引数である strWindowFeatures に適切な設定を施せば新しいウィンドウを開くことができます。 ただし、strWindowFeatures オプションはブラウザによっては機能しないオプション値もありますので、 その場合はウィンドウの横幅と高さを指定する方法で試してください。

サンプルコード: HTML
<body>
	<input type="button" value="ボタン" onclick="evtName_NewWindow()">
</body>
  • 02: input 要素 button 型 (クリックすると evtName_NewWindow() 関数を呼び出す)
サンプルコード: script
<script>
	function evtName_NewWindow(){
		window.open("任意のURL", null, "width=200, height=200");
	}
</script>
  • 02: 関数の作成 (evtName_NewWindow という名前の関数を作成)
  • 03: 関数内の処理 (window.open でウィンドウを開く)
実行結果:

実行:

目次に戻る

引数 (strWindowFeatures) オプションで使用される値

ここでは構文の strWindowFeatures の部分に指定できる値を表形式で掲載しておきます。

使用方法は各設定値を「オプション名=値」の形式でカンマ区切りで列挙します。 値は文字型で指定しなければならないので、ダブルクォーテーションかシングルクォーテーションで囲ってください。 以下にコードのサンプルを掲載します。

ただし、このオプションはブラウザによっては完全に機能するかは分りません。

window.open("任意のURL", null, "オプション名=値, オプション名=値, オプション名=値");
オプション名
top
またはscreenX
画面の上端からの位置を数値で指定します
left
またはscreenY
画面の左端からの位置を数値で指定します
width
またはinnerWidth
ウィンドウの横幅を数値で指定します
height
またはinnerHeight
ウィンドウの高さを数値で指定します
menubarメニューバーの有無をyesかno、または1か0で指定します
toolbarツールバーの有無をyesかno、または1か0で指定します
locationアドレスバーの有無をyesかno、または1か0で指定します
resizableウィンドウのリサイズ可否をyesかno、または1か0で指定します
scrollbarsスクロールバーの有無をyesかno、または1か0で指定します
noopener新しく開いたウィンドウは通常通りに開きますが、Window.openerから元のウィンドウにはアクセスできなくなります。さらに元のウィンドウも新しいウィンドウにアクセスできなくなります。これは、window.open()で他のサイトを開く場合のセキュリティとして有効です。
noreferrerリクエストを開始したページのURLを、リクエストを送信するサーバーに送信することを防ぎます。

サンプルコード: HTML
<body>
	<input type="button" value="ボタン" onclick="evtName_winFeatures()">
</body>
  • 02: input 要素 button 型 (クリックするとevtName_winFeatures()関数を呼び出す)
サンプルコード: script
<script>
	function evtName_winFeatures(){
		window.open("任意のURL", null, "width=300, height=300, left=200, top=200");
	}
</script>
  • 02: 関数の作成 (evtName_winFeaturesという名前の関数を作成)
  • 03: 関数内の処理 (window.openでウィンドウを開く)
実行結果:

実行:

目次に戻る

引数 (strWindowName) の応用: ウィンドウ名の取得

このサンプルは新しく開いたウィンドゥの名前を取得して表示します。

サンプルコード: HTML
<body>
	<p><a href="javascript:evtName_winName('newWindow')">ウィンドウを開く</a><p>
	<p><output id="idAnswer">innerText</output></p><br>
</body>
  • 02: a要素 (クリックするとevtName_winName(送り値)関数を呼び出す)
  • 02: output要素 (この要素のinnerTextプロパティにウィンドウ名を出力する)
サンプルコード: script
<script>
	function evtName_winName(strWindowName){
		let newWin = window.open("任意のURL", strWindowName, "width=300, height=300");
		document.getElementById("idAnswer").innerText = newWin.name;
	}
</script>
  • 02: 関数を作成 (evtName_winName(受け取りパラメータ)関数の作成)
  • 03: 変数の宣言 (newWin変数にwindow.openでWindowオブジェクトの参照を代入)
  • 04: 結果出力 (newWin変数からWindowオブジェクトの名前を取得して書き出し)
実行結果:

実行1: ウィンドウを開く
ウィンドウを開く

ウィンドウ名:
innerText

目次に戻る