NEW ARTICLE
Rocky Linuxでのファイルシステムの暗号化
  1. HOME
  2. javascript
  3. javascript iframe内でフォーカスされている要素を取得する

javascript iframe内でフォーカスされている要素を取得する

javascript iframe内でフォーカスされている要素を取得する

javascriptで、iframe内でフォーカスされている要素を取得するサンプルコードを記述してます。

目次

環境

  • OS windows11 home
  • ブラウザ chrome 103.0.5060.114
Javascript サンプル集はこちら

iframe内でフォーカスされている要素を取得

以下のように、activeElementメソッドだけの場合だと、iframe内でフォーカスされている要素を取得することができずに、iframe全て取得されます。

<script>

// 3秒ごとにフォーカスされている要素を取得する
setInterval(function () {    
    console.log(document.activeElement)    
}, 3000);

</script>

<body>

    <div class="main">

        <iframe width="600" height="500" src="test.html">

    </div>

</body>

実行結果

なので、取得する場合は、iframe内のdocumentオブジェクトを取得することが可能な「contentDocument.activeElement」を使用する必要があります。

<script>

// 3秒ごとにフォーカスされている要素を取得する
setInterval(function () {    
    console.log(document.activeElement.contentDocument.activeElement)    
}, 3000);

</script>

<body>

    <div class="main">

        <iframe width="600" height="500" src="test.html">

    </div>

</body>

実行結果をみると、取得されていることが確認できます。