【JavaScript】ウィンドウの操作方法を解説｜Webの基礎

記事内には広告が含まれます

2026年8月9日

JavaScriptのウィンドウ操作（window.open）解説｜Webの基礎

はじめに

前回の記事では、windowオブジェクトを頂点とするブラウザの仕組み（BOM）について解説しました。

今回は、そのwindowオブジェクトを使って新しいウィンドウを開く・閉じる・移動する・サイズを変えるといった、ウィンドウそのものを操作する方法を解説します。ヘルプ画面をポップアップで表示したり、印刷用の別ウィンドウを開いたりする場面で使われる基本機能です。あわせて、多くのブラウザに搭載されている「ポップアップブロック」への対処法も紹介します。

新しいウィンドウを開く（window.open）

新しいウィンドウ（またはタブ）を開くにはwindow.open()を使います。

window.open("https://www.kurumico.com/");

window.open()には、URL以外にも「どこに開くか」「どんな見た目で開くか」を指定する引数があります。

window.open(url, target, features);

引数	内容
`url`	開くページのURL
`target`	開き先の名前（`_blank`など。省略可）
`features`	ウィンドウの幅・高さ・位置などをカンマ区切りで指定する文字列（省略可）

const popup = window.open(
    "https://www.kurumico.com/",
    "_blank",
    "width=400,height=300,left=100,top=100"
);

featuresでwidth・heightなどのサイズを指定すると、小さな「ウィンドウ」として開かれることが多くなります。何も指定しない場合は、通常のリンクと同じように「新しいタブ」で開かれるのが一般的です。ただし最終的にウィンドウとタブのどちらで開くかはブラウザ側の判断に委ねられており、必ずウィンドウとして開かれると保証されているわけではありません。

ポップアップブロックに注意

多くのブラウザには、迷惑なポップアップ広告を防ぐための「ポップアップブロック」機能があります。ボタンのクリックなどユーザー操作を伴わずにwindow.open()を呼び出すと、ブロックされてnullが返ってくることがあります。

const popup = window.open("https://www.kurumico.com/", "_blank", "width=400,height=300");

if (popup === null) {
    alert("ポップアップがブロックされました。ブラウザの設定をご確認ください。");
}

window.open()は、ボタンのクリックイベントなどユーザーの操作をきっかけに呼び出すのが基本です。ページの読み込み時に自動実行すると、ほぼ確実にブロックされます。

開いたウィンドウを閉じる（window.close）

window.open()で開いたウィンドウは、戻り値として受け取った参照に対してclose()を呼び出すことで閉じられます。

const popup = window.open("https://www.kurumico.com/", "_blank", "width=400,height=300");

// 3秒後に自動で閉じる
setTimeout(() => {
    popup.close();
}, 3000);

セキュリティ上の理由から、スクリプトで開いたウィンドウ以外は閉じることができません。ユーザーが手動で開いた通常のタブに対してwindow.close()を実行しても、多くのブラウザでは無視されるか、コンソールに警告が表示されるだけで何も起こりません。

ウィンドウの移動・リサイズ

開いたウィンドウの位置やサイズは、それぞれmoveTo・resizeToで変更できます。

popup.moveTo(200, 200);     // 画面の(200, 200)の位置に移動
popup.resizeTo(600, 400);   // 幅600px・高さ400pxにリサイズ

移動量・変化量を相対値で指定したい場合はmoveBy・resizeByを使います。

popup.moveBy(50, 0);     // 現在位置から右に50px移動
popup.resizeBy(0, 100);  // 現在の高さから100px拡大

close()と同様に、これらのメソッドもスクリプトで開いたウィンドウに対してのみ有効です。ブラウザの通常のタブや、ユーザーが直接操作しているウィンドウに対しては動作しません。

ウィンドウにフォーカスを当てる（window.focus）

すでに開いているウィンドウを前面に表示したい場合はfocus()を使います。同じウィンドウを何度も開かないようにする際によく利用します。

let helpWindow = null;

function openHelp() {
    if (helpWindow && !helpWindow.closed) {
        // すでに開いていれば前面に表示するだけ
        helpWindow.focus();
        return;
    }
    helpWindow = window.open("help.html", "helpWindow", "width=400,height=300,left=200,top=200");
}

helpWindow.closedは、そのウィンドウがユーザーによってすでに閉じられていないかを確認するためのプロパティです。閉じられているかどうかを確認せずにfocus()を呼び出すと、エラーになる場合があるため、あわせて使うのがポイントです。

実務サンプル（ヘルプウィンドウの開閉）

ボタンをクリックすると小さなヘルプウィンドウを開き、すでに開いていれば前面に表示するサンプルです。

HTML

<button id="openBtn">ヘルプを別ウィンドウで開く</button>

JavaScript（main.js）

const openBtn = document.getElementById("openBtn");
let helpWindow = null;

openBtn.addEventListener("click", () => {
    if (helpWindow && !helpWindow.closed) {
        helpWindow.focus();
        return;
    }

    helpWindow = window.open(
        "help.html",
        "helpWindow",
        "width=400,height=300,left=200,top=200"
    );

    if (helpWindow === null) {
        alert("ポップアップがブロックされました。ブラウザの設定をご確認ください。");
    }
});

ボタンのクリック（ユーザー操作）をきっかけにwindow.open()を呼び出しているためポップアップブロックの対象になりにくく、helpWindow.closedのチェックによって同じウィンドウが何個も開いてしまうことも防いでいます。