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

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

HTML DOMのWindow frameElementプロパティは、現在のウィンドウが埋め込まれているHTML要素（<embed>、<iframe>、<object>など）を取得するためのプロパティです。

ウィンドウがiframeなどの要素に埋め込まれていない場合（トップレベルウィンドウの場合）、このプロパティはnullを返します。そのため、ページがフレーム内で表示されているかどうかを判定したい場面で非常に役立ちます。

構文

frameElementプロパティの基本的な構文は以下のとおりです。

window.frameElement

使用例

ここでは、HTML DOM Window frameElementプロパティを使った具体的なサンプルコードを紹介します。ユーザーが入力したURLに基づいて、埋め込み元の要素のsrc属性を変更する仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window frameElement</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-frameElement</legend>
           <input id="urlSelect" type="url" placeholder="Type URL here...">
           <input type="button" value="Go To" onclick="goToURL()">
           <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
    var urlSelect = document.getElementById("urlSelect");
    var divDisplay = document.getElementById("divDisplay");
    function goToURL() {
        if(window.frameElement){
            window.frameElement.src = urlSelect.value;
            divDisplay.textContent = 'Current Window is embedded';
        }
        else
            divDisplay.textContent = 'Current Window is not embedded';
    }
    </script>
</body>
</html>

実行結果

URLフィールドに値を入力して「Go To」ボタンをクリックすると、次のような画面が表示されます。

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

続いて、埋め込み要素のsrc属性が変更されると、以下のように表示内容が更新されます。

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

ポイント解説

  • 埋め込み判定： window.frameElementがnullかどうかを確認することで、現在のページがiframeなどで埋め込まれているかどうかを簡単に判別できます。
  • セキュリティ制約： 異なるオリジン（ドメイン）から読み込まれたiframe内では、同一オリジンポリシーによりframeElementへのアクセスが制限される場合があります。
  • 対応ブラウザ： 主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）すべてでサポートされています。
  1. 【HTML DOM】Window framesプロパティの使い方とサンプルコード

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

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

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