JS

【js】window.openメソッドを使って新規ウィンドウにリンク先を表示しよう！

window.openメソッドを使って新規ウィンドウにリンク先を表示しよう！

window.openとは？

window.openメソッドはJavascriptのオブジェクトメソッドで、新しいウィンドウやタブを開く為に使用します。
HTMLの＜a＞要素と同様の動きができますが、window.openメソッドは指定したサイズでの新しいウィンドウをポップアップの様に開く事ができます。

基本的な構文

window.open( "①URL", "②ウィンドウ名", "③オプション" );

基本的な構文はこの通りです。

１.URL

開きたいページを入れます。

2.ウィンドウ名

ウィンドウ名を設定します。同じウィンドウ名が設定されている場合は、そのウィンドウ内でページが読み込まれます。
ウィンドウ名の設定名は任意です。

また、このウィンドウ名に＜a＞要素で使われるtarget指定を使用する事ができます。

  • _blank（新しいタブまたはウィンドウで開く）
  • _self（同じウィンドウ・タブで開く）
  • _parent（親フレームで開く）
  • _top（最上位のフレームで開く）

3.オプション

サイズや表示位置を指定する事ができます。

よく使われるオプションは以下の通り。

  • width（ウィンドウの幅）
  • height（ウィンドウの高さ）
  • left/top（表示位置）
  • resizable（ウィンドウサイズ変更の可否）
  • scrollbars（スクロールバーの有無）

条件による設定方法

条件によって設定方法が変わってきます。
リンク先はGooglemapにします。

共通HTML

<div onclick="link()">新規Windowで開く</div>

HTMLは全て共通になります。

別タブで開く

<script>
function link() {
 window.open("https://www.google.co.jp/maps/");
 }
</script>

URLだけを入れると、＜a＞要素のデフォルト同様に新規タブで開きます。

ウィンドウサイズを指定する

<script>
function link() {
 window.open("https://www.google.co.jp/maps/","name","width=800,height=500");
 }
</script>

新規ウィンドウが800×500で開きます。

サイズ変更可能なウィンドウ

<script>
function link() {
 window.open("https://www.google.co.jp/maps/","name","width=800,height=500,resizable=yes");
 }
</script>

リサイズ可能な新規ウィンドウが800×500で開きます。

サイズ変更可能なウィンドウ

<script>
function link() {
 window.open("https://www.google.co.jp/maps/","name","width=800,height=500,resizable=yes,top=100,left=100");
 }
</script>

リサイズ可能な新規ウィンドウが上100px左100pxの位置に800×500で開きます。

まとめ

上記の設定例の4つを1ページにまとめてみました。
「function link()」の部分が同じだと動かないので、全て別名に変更しました。

<body>
 <div onclick="link()">新規Windowで開く</div>
 <div onclick="link2()">新規Windowで開く</div>
 <div onclick="link3()">新規Windowで開く</div>
 <div onclick="link4()">新規Windowで開く</div>

 <script>
 function link() {
  window.open("https://www.google.co.jp/maps/");
 }

 function link2() {
  window.open("https://www.google.co.jp/maps/","name","width=800,height=500");
 }

 function link3() {
  window.open("https://www.google.co.jp/maps/","name","width=800,height=500,resizable=yes");
 }

 function link4() {
  window.open("https://www.google.co.jp/maps/","name","width=800,height=500,resizable=yes,top=100,left=100");
 }
 </script>		
</body>

RECOMMENDこちらの記事も人気です。