読者です 読者をやめる 読者になる 読者になる

フレーム内の activeElement

Web ページでフォーカスのあたっている要素は document.activeElement で取得できます。

textarea 要素にフォーカスがあたっている場合の document.activeElement 結果
>>> document.activeElement
<textarea>

ただし、フレームやインラインフレーム (IFRAME) 内の要素にフォーカスがあたっている場合、document.activeElement はそのフレーム (もしくはインラインフレーム) を返します。 (フレーム内の要素は取得されません)

iframe 内の input 要素にフォーカスがあたっている場合の document.activeElement 結果
>>> document.activeElement
<iframe width="300" height="300" src="sample.html">

この場合は、フレームの contentDocument.activeElement *1 でフォーカスのあたっている要素を取得できます。 *2

iframe 内でフォーカスのあたっている input 要素を取得する例
>>> document.activeElement.contentDocument.activeElement
<input type="text">

フレームが入れ子になっている場合は上記を繰り返す事になるため、下記のように contentDocument の有無で再帰的に処理するような関数を用意した方が実用的かもしれません。

フレームの入れ子に対応した activeElement 取得関数の例
function findActiveElement(doc) {
    var result = doc.activeElement;
    // activeElement で取得した要素に contentDocument があれば再帰処理
    return (result.contentDocument)? findActiveElement(result.contentDocument): result;
}

*1:contentDocument をサポートしていない Web ブラウザでは contentWindow.document が代わりに使えると思います

*2:フレームのコンテンツが別ドメインとかの場合は Web ブラウザのセキュリティ制限のため取得できないかもしれません