JavaScript でポップアップ ウィンドウを開く

この記事では、JavaScript を使用してポップアップ ウィンドウを開く方法を紹介します。

JavaScript で Window open() メソッドを使用してポップアップ ウィンドウを開く

ポップアップ ウィンドウは、元のウィンドウを開いたままユーザーに追加情報を表示する別のウィンドウです。 Web サイトでユーザーと対話しているときに、ポップアップ ウィンドウを使用する必要がある場合があります。

一般的なシナリオの 1つは、OAuth 承認の実行中です。 たとえば、Gmail アカウントを使用して SAAS アプリケーションにログインしようとすると、新しいポップアップ ウィンドウが開き、アプリケーションにログインするために選択する Gmail アカウントのリストが表示されます。

ポップアップ ウィンドウについて注意すべき重要な概念は、JavaScript 環境があり、サード パーティのアプリケーションや信頼できないサイトを安全に実行できるということです。 それでは、このようなポップアップ ウィンドウを作成する方法を見てみましょう。

window オブジェクトが提供する open() メソッドは、新しいウィンドウを開きます。 open() メソッドの構文を以下に示します。

window.open(url, name, parameter)

url オプションは、ポップアップ ウィンドウとして開くページの URL です。 name オプションは、開くウィンドウの名前です。

window.name はブラウザでのウィンドウの名前を定義します。 parameter オプションは、ウィンドウを開く際の設定オプションの表記です。

高さ/幅、メニューバー、ツールバーなどのいくつかの構成が含まれています。

たとえば、url と windowName の 2つのパラメータを取る JavaScript 関数 popUp() を作成します。 関数内で、変数 newWindow を作成し、変数内の window オブジェクトを使用して open() メソッドを呼び出します。

open() メソッドで、パラメーター url、windowName、height、および width を指定します。 お好みの高さと幅を設定します。

次にwindow.focusの条件を確認し、trueであればnewWindow.focus()で作成したばかりの新規ウィンドウにフォーカスを設定します。 最後に、false を返します。

HTML では、アンカー タグ <a> </a> を作成します。 href 属性に任意の URL を設定します。

次に、アンカー タグ内で、onclick イベントを作成します。 href 属性と同じ URL とウィンドウ名をパラメータとして popUp() 関数を呼び出します。

アンカー タグの間にテキストを記述して、クリック可能なリンクを作成します。

コード例:

function popUp(url, windowName) {
  var newWindow = window.open(url, windowName, 'height=200,width=200');
  if (window.focus) {
    newWindow.focus()
  }
  return false;
}

<a href="https://www.youtube.com/" onclick="return popUp('https://www.youtube.com/', 'youtube')">Youtube Popup</a>

上記の例では、Youtube の URL https://www.youtube.com/ を使用して、新しいポップアップ ウィンドウを作成しています。 onClick イベントが発生するたびに、新しいウィンドウが作成されます。

次に、フォーカスが新しく作成されたウィンドウに移動し、ポップアップとして表示されます。 href 属性に設定された URL にブラウザがリダイレクトされないように、関数内で false を返しています。

このように、JavaScript で window.open メソッドを使用して新しいポップアップ ウィンドウを開く方法を学びました。