JavaScript windowopenの使い方を徹底解説！初心者向け10選

はじめに
●JavaScriptのwindow.openとは
- ○window.openの基本
●window.openの使い方
●応用例とサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのwindow.openを使った新しいウィンドウの開き方やカスタマイズ方法が簡単に理解できるようになります。

初心者の方でも手順を追っていけば、自分で実践できるレベルまでスキルアップできることでしょう。

●JavaScriptのwindow.openとは

window.openは、JavaScriptで新しいウィンドウを開くためのメソッドです。

指定したURLや設定で新しいウィンドウやタブを開くことができます。

ウィンドウのサイズや位置、オプションなども細かく設定できるため、さまざまな用途に活用できます。

○window.openの基本

window.openメソッドの基本構文は次の通りです。

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

URL: 新しいウィンドウで開くページのURLを指定します。
ウィンドウ名: 新しいウィンドウに名前を付けることができます。同じ名前のウィンドウが既に開かれている場合、そのウィンドウにURLが読み込まれます。
ウィンドウオプション: 新しいウィンドウのサイズや位置、機能などを指定します。

●window.openの使い方

ここでは、基本的なwindow.openの使い方から、ウィンドウのサイズや位置、オプションを指定する方法まで、サンプルコードとともに解説していきます。

○サンプルコード1：シンプルなwindow.openの使い方

このコードでは、ボタンをクリックすると新しいウィンドウで指定したURLが開く方法を紹介しています。

この例では、Googleのトップページを新しいウィンドウで開いています。

<button onclick="openWindow()">新しいウィンドウでGoogleを開く</button>

<script>
function openWindow() {
  window.open('https://www.google.com');
}
</script>

○サンプルコード2：ウィンドウサイズを指定する方法

このコードでは、新しいウィンドウの幅と高さを指定して開く方法を紹介しています。

この例では、幅300px、高さ200pxのウィンドウで指定したURLが開かれます。

<button onclick="openWindowSize()">ウィンドウサイズ指定でGoogleを開く</button>

<script>
function openWindowSize() {
  window.open('https://www.google.com', '', 'width=300,height=200');
}
</script>

○サンプルコード3：ウィンドウの位置を指定する方法

このコードでは、新しいウィンドウの表示位置を指定して開く方法を紹介しています。

この例では、画面左上から横100px、縦50pxの位置にウィンドウが開きます。

<button onclick="openWindowPosition()">ウィンドウ位置指定でGoogleを開く</button>

<script>
function openWindowPosition() {
  window.open('https://www.google.com', '', 'left=100,top=50');
}
</script>

○サンプルコード4：ウィンドウオプションを指定する方法

このコードでは、新しいウィンドウのオプションを指定して開く方法を紹介しています。

この例では、ツールバーなし、メニューバーなし、スクロールバーありのウィンドウを開いています。

<button onclick="openWindowOption()">ウィンドウオプション指定でGoogleを開く</button>

<script>
function openWindowOption() {
  window.open('https://www.google.com', '', 'toolbar=no,menubar=no,scrollbars=yes');
}
</script>

●応用例とサンプルコード

次に、さまざまな応用例をサンプルコードとともに紹介していきます。

○サンプルコード5：リンククリック時に新しいウィンドウを開く

このコードでは、リンクをクリックしたときに新しいウィンドウで指定したURLが開く方法を紹介しています。

この例では、リンクをクリックするとGoogleのトップページが新しいウィンドウで開きます。

<a href="https://www.google.com" onclick="openLinkNewWindow(event)">Googleを新しいウィンドウで開く</a>

<script>
function openLinkNewWindow(e) {
  e.preventDefault();
  window.open(e.target.href);
}
</script>

○サンプルコード6：画像クリック時に拡大画像を表示する

このコードでは、画像をクリックすると新しいウィンドウで拡大画像が表示される方法を紹介しています。

この例では、サムネイル画像をクリックすると大きな画像が新しいウィンドウで開きます。

<img src="thumbnail.jpg" onclick="showLargeImage()" alt="サムネイル画像">

<script>
function showLargeImage() {
  window.open('large-image.jpg');
}
</script>

○サンプルコード7：フォーム送信前の確認画面を表示する

このコードでは、フォームの送信ボタンを押す前に新しいウィンドウで確認画面を表示する方法を紹介しています。

この例では、送信ボタンをクリックすると確認画面が新しいウィンドウで開きます。

<form onsubmit="return openConfirmationWindow();">
  <!-- フォーム要素 -->
  <button type="submit">送信</button>
</form>

<script>
function openConfirmationWindow() {
  let confirmWindow = window.open('confirmation.html');
  // 確認画面の閉じるボタンがクリックされたら、送信処理を行う
  confirmWindow.addEventListener('unload', function () {
    if (confirmWindow.confirmationResult) {
      // 送信処理
    }
  });
  // 送信処理を中断
  return false;
}
</script>

○サンプルコード8：条件に応じてウィンドウを開く/閉じる

このコードでは、条件に応じてウィンドウを開いたり閉じたりする方法を紹介しています。

この例では、ボタンをクリックするとウィンドウが開き、再度クリックすると閉じます。

<button onclick="toggleWindow()">ウィンドウを開く/閉じる</button>

<script>
let myWindow;

function toggleWindow() {
  if (myWindow && !myWindow.closed) {
    myWindow.close();
  } else {
    myWindow = window.open('https://www.google.com');
  }
}
</script>

○サンプルコード9：ウィンドウ間のデータの受け渡し

このコードでは、ウィンドウ間でデータを受け渡す方法を紹介しています。

この例では、親ウィンドウから子ウィンドウにデータを送り、子ウィンドウから受け取ったデータを表示します。

<!-- 親ウィンドウ -->
<button onclick="openChildWindow()">子ウィンドウを開く</button>
<div id="result"></div>

<script>
let childWindow;

function openChildWindow() {
  childWindow = window.open('child.html');
}

function receiveData(data) {
  document.getElementById('result').innerText = data;
}
</script>

<!-- child.html -->
<button onclick="sendDataToParent()">データを送る</button>

<script>
function sendDataToParent() {
  window.opener.receiveData('子ウィンドウからのデータ');
}
</script>

○サンプルコード10：ポップアップブロック対策

このコードでは、ポップアップブロックされる可能性がある場合の対策方法を紹介しています。

この例では、新しいウィンドウが開けない場合にアラートを表示させることで、ユーザーにポップアップの許可を促します。

<button onclick="openPopup()">新しいウィンドウを開く</button>

<script>
function openPopup() {
  let newWindow = window.open('https://www.google.com', '_blank');

  if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {
    alert('ポップアップがブロックされました。設定を変更して再試行してください。');
  }
}
</script>

●注意点と対処法

window.openを使用する際には、次の注意点を把握し、適切な対処法を実践してください。

ポップアップブロックの影響：ユーザーのブラウザ設定や拡張機能によっては、ポップアップがブロックされることがあります。
サンプルコード10のような対策を行うことで、ユーザーにポップアップの許可を促すことができます。
セキュリティ上の制約：特定の条件下で、ウィンドウ間のデータ受け渡しが制限されることがあります。
異なるオリジン間でのデータ受け渡しには、postMessageなどの方法を使用することを検討してください。