• window.openの使い方
• window.closeの使い方
• window.closedの使い方
• まとめ

window.openの使い方

window.open() は、新しいブラウザウィンドウまたはタブを開くためのメソッドです。

基本構文

window.open(url, name, style);

• url: 開きたいページのURLを指定します。省略すると空のページが開きます。
• name: ウィンドウの名前やターゲット属性を指定します。同じ名前を指定すると同一ウィンドウが再利用されます。
• style: ウィンドウのスタイルをカンマ区切りで指定します。例: width=600,height=400

例: 新しいウィンドウでGoogleを開く

window.open('https://www.google.com', '_blank', 'width=800,height=600');

例: 同じウィンドウを再利用する

const myWindow = window.open('https://example.com', 'myWindow', 'width=500,height=500');
myWindow.location.href = 'https://another-example.com';

例: ポップアップウィンドウをカスタマイズ

window.open(
    'https://www.example.com',
    'popupWindow',
    'width=400,height=300,scrollbars=yes,resizable=yes'
);

window.closeの使い方

window.close() は現在のウィンドウまたは指定したウィンドウを閉じるためのメソッドです。

基本構文

window.close();

例: 新しいウィンドウを開いて閉じる

const myWindow = window.open('https://www.example.com', '_blank', 'width=400,height=300');
myWindow.close();

注意点

• JavaScriptで開いたウィンドウのみ閉じることができます。
• ユーザーの操作なしに自動で閉じる場合、ブラウザが動作を制限することがあります。

window.closedの使い方

window.closed はウィンドウが閉じられているかを判定するプロパティです。

基本構文

window.closed

戻り値は true または false です。

例: ウィンドウの状態を確認

const myWindow = window.open('https://www.example.com', '_blank', 'width=400,height=300');
console.log(myWindow.closed); // false
myWindow.close();
console.log(myWindow.closed); // true

例: 閉じられたウィンドウを監視

const myWindow = window.open('https://www.example.com', '_blank', 'width=400,height=300');

const interval = setInterval(() => {
    if (myWindow.closed) {
        clearInterval(interval);
        alert('ウィンドウが閉じられました');
    }
}, 1000);

まとめ

このページでは、window.open, window.close, window.closed について詳細に解説しました。これらのメソッドを活用することで、JavaScriptを使った柔軟なウィンドウ管理が可能になります。実際の用途に応じて、適切に使用してください。