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

HTML Window lengthプロパティの使い方を徹底解説！iframeの数を取得する方法

HTMLのWindow lengthプロパティは、現在のHTMLドキュメント内に存在する<iframe>要素の数を返すプロパティです。ページに埋め込まれたインラインフレームの個数を簡単に取得できるため、動的なコンテンツ制御やデバッグ時に便利です。

この記事では、window.lengthプロパティの基本構文から、実際に動作するサンプルコード、実行結果の確認方法まで、初心者の方にもわかりやすく解説します。

Window lengthプロパティの基本構文

window.lengthプロパティの構文は非常にシンプルで、以下のように記述します。

window.length

引数は不要で、呼び出すだけで現在のドキュメント内のiframe要素の総数が数値として返されます。なお、window.frames.lengthも同じ値を返すため、どちらの書き方でも同様の結果が得られます。

HTML Window lengthプロパティの使用例

ここでは、ボタンをクリックするとドキュメント内のiframe要素の数が画面に表示される、シンプルなデモを作成してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>HTML Window length Property</h1>
<iframe src="https://tutorialspoint.com/"></iframe>
<button onclick="display()" class="btn">Show the number of iframe</button>
<div class="show"></div>
<script>
    function display() {
        document.querySelector('.show').innerHTML = 'Number of iframe is: ' + window.length;
    }
</script>
</body>
</html>

コードのポイント解説

  • <iframe>要素： ページ内に外部サイト（tutorialspoint.com）を埋め込むiframeを1つ配置しています。
  • onclickイベント： ボタンがクリックされるとdisplay()関数が呼び出されます。
  • window.length： クリック時点でのドキュメント内のiframe要素の数を取得し、結果を画面に出力します。

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

HTML Window lengthプロパティの使い方を徹底解説！iframeの数を取得する方法

「Show the number of iframe」ボタンをクリックすると、HTMLドキュメント内のiframe要素の数が画面に表示されます。

HTML Window lengthプロパティの使い方を徹底解説！iframeの数を取得する方法

この例ではiframeが1つだけ配置されているため、「Number of iframe is: 1」という結果が出力されます。iframeを追加すれば、その数に応じて表示される数値も変化します。

まとめ

Window lengthプロパティを使えば、ドキュメント内のiframe要素の数をたった1行で取得できます。埋め込みコンテンツの管理や、JavaScriptによる動的な処理を行う際にぜひ活用してみてください。

  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