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

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

HTML DOM の Window frames プロパティは、現在のウィンドウ内に存在するすべてのフレーム（<iframe> 要素など）に対応するオブジェクトを返します。このプロパティを利用することで、ページ内の各フレームにプログラムからアクセスし、内容や URL（location）を操作できるようになります。

構文

構文は以下のとおりです。

現在のウィンドウ内のフレームを取得する場合：

window.frames

framesプロパティのポイント

  • 配列風（Array-like）オブジェクト：length プロパティやインデックスによるアクセスが可能です。
  • 各要素は window オブジェクト：window.frames[i] は、i 番目のフレームの window オブジェクトを参照します。
  • HTML5での扱い：従来の <frame> 要素は廃止されましたが、<iframe> 要素は引き続き有効であり、window.frames からアクセスできます。

使用例

ここでは、Window frames プロパティの具体的な使用例を紹介します。次のコードでは、ページ内に2つの iframe を配置し、ボタンをクリックするとすべてのフレームの URL を一括で変更する処理を行っています。

サンプルコード

<!DOCTYPE html><html>
<head>
<title>HTML DOM Window frames</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-frames</legend>
         <label>ユーザー1：</label><iframe src="https://www.example.com"></iframe><br>
         <label>ユーザー2：</label><iframe src="https://www.example.com"></iframe><br>
         <input type="button" value="動画を読み込む" onclick="goToURL()">
         <div id="divDisplay">
         </div>
      </fieldset>
   </form>
   <script>
      var divDisplay = document.getElementById("divDisplay");
      function goToURL() {
         for (var i = window.frames.length - 1; i >= 0; i--)
            window.frames[i].location = "https://www.tutorialspoint.com/html5/foo.mp4";
            divDisplay.textContent = '動画の読み込みが完了しました';
      }
   </script>
</body>
</html>

コードの解説

  • ページ内に2つの <iframe> を配置しています。
  • ボタンをクリックすると goToURL() 関数が呼び出されます。
  • window.frames.length でフレーム数を取得し、後ろから順にループ処理を行います。
  • window.frames[i].location に新しい URL を代入することで、すべてのフレームの表示内容を一括で切り替えています。

実行結果

ボタンをクリックする前の画面は以下のとおりです。

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

ボタンをクリックすると、すべてのフレームの location が指定した URL に変更され、メッセージが表示されます。

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

まとめ

window.frames プロパティを使えば、ウィンドウ内のすべてのフレームを配列のように扱い、個別のフレームに対して柔軟に操作を行うことができます。複数の iframe をまとめて制御したい場合に便利なプロパティなので、ぜひ活用してみてください。

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

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

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

    HTML DOMのWindow closedプロパティは、ウィンドウが閉じられているかどうかの状態を示す真偽値（boolean）を返します。ウィンドウがすでに閉じている場合はtrue、まだ開いている場合はfalseが返されます。このプロパティは、window.open()で開いたポップアップウィンドウの状態を監視したり、ユーザーによって閉じられたウィンドウを再オープンするかどうかを判定したりする際に非常に便利です。構文Window closedプロパティの構文は以下の通りです。window.closed戻り値：true（ウィンドウが閉じている場合）／ false（ウィンドウが開いている場合）サ