HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのWindow closedプロパティとは?使い方とサンプルコードを解説

HTML DOMのWindow closedプロパティは、ウィンドウが閉じられているかどうかの状態を示す真偽値(boolean)を返します。ウィンドウがすでに閉じている場合はtrue、まだ開いている場合はfalseが返されます。

このプロパティは、window.open()で開いたポップアップウィンドウの状態を監視したり、ユーザーによって閉じられたウィンドウを再オープンするかどうかを判定したりする際に非常に便利です。

構文

Window closedプロパティの構文は以下の通りです。

window.closed

戻り値:true(ウィンドウが閉じている場合)/ false(ウィンドウが開いている場合)

サンプルコード

HTML DOM Window closedプロパティの具体的な使用例を見てみましょう。次の例では、URLを入力して新しいウィンドウを開き、閉じてから再度復元(再オープン)することができます。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window closed</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Window-closed</legend>
            <input id="urlSelect" type="url" placeholder="ここにURLを入力..."><br>
            <input type="button" value="移動" onclick="openWindow()">
            <input type="button" value="閉じる" onclick="closeWindow()">
            <input type="button" value="復元" onclick="restoreWindow()">
        </fieldset>
    </form>
    <script>
        var urlSelect = document.getElementById("urlSelect");
        var winSource;
        function openWindow() {
            browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height=200");
            winSource = urlSelect.value;
        }
        function closeWindow(){
            if(browseWindow)
                browseWindow.close();
        }
        function restoreWindow(){
            if(browseWindow.closed)
                browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
        }
    </script>
</body>
</html>

コードのポイント

  • openWindow():入力されたURLをもとに、幅400px・高さ200pxの新しいウィンドウを開きます。
  • closeWindow():開いたウィンドウが存在する場合、そのウィンドウを閉じます。
  • restoreWindow()browseWindow.closedtrue(ウィンドウが閉じられている)の場合にのみ、保存しておいたURLで再度ウィンドウを開きます。

実行結果

URLフィールドに入力して「移動」ボタンをクリックすると、指定したサイズで新しいウィンドウが開きます。

HTML DOMのWindow closedプロパティとは?使い方とサンプルコードを解説

続けて「閉じる」ボタンをクリックすると、開いていたウィンドウが閉じられます。

HTML DOMのWindow closedプロパティとは?使い方とサンプルコードを解説

この状態で「復元」ボタンをクリックすると、closedプロパティによる判定が働き、閉じたウィンドウが再度開きます。

HTML DOMのWindow closedプロパティとは?使い方とサンプルコードを解説

まとめ

Window closedプロパティを使えば、JavaScriptからウィンドウの開閉状態を簡単に確認できます。特にポップアップウィンドウを扱うWebアプリケーションでは、意図せず閉じられたウィンドウへの操作を防ぐためのチェックとして活用できます。window.open()window.close()メソッドと組み合わせることで、より柔軟なウィンドウ制御が可能になります。

  1. 【HTML DOM】Window framesプロパティの使い方とサンプルコード

    HTML DOM の Window frames プロパティは、現在のウィンドウ内に存在するすべてのフレーム(<iframe> 要素など)に対応するオブジェクトを返します。このプロパティを利用することで、ページ内の各フレームにプログラムからアクセスし、内容や URL(location)を操作できるようになります。構文構文は以下のとおりです。現在のウィンドウ内のフレームを取得する場合:window.framesframesプロパティのポイント配列風(Array-like)オブジェクト:length プロパティやインデックスによるアクセスが可能です。各要素は window オブジェクト

  2. HTML DOM Window frameElementプロパティの使い方を徹底解説

    HTML DOMのWindow frameElementプロパティは、現在のウィンドウが埋め込まれているHTML要素(<embed>、<iframe>、<object>など)を取得するためのプロパティです。ウィンドウがiframeなどの要素に埋め込まれていない場合(トップレベルウィンドウの場合)、このプロパティはnullを返します。そのため、ページがフレーム内で表示されているかどうかを判定したい場面で非常に役立ちます。構文frameElementプロパティの基本的な構文は以下のとおりです。window.frameElement使用例ここでは、HTML DOM