HTML Window topプロパティとは？使い方をサンプルコード付きで解説
HTML Window の top プロパティは、現在のウィンドウにおける最上位（トップレベル）のブラウザウィンドウへの参照を返します。このプロパティは読み取り専用であり、window.self と比較することで、自分自身がトップレベルのウィンドウであるかどうかを簡単に判定できます。特に iframe を利用したページのように、ウィンドウが入れ子になっている構造を扱う際に非常に便利です。
構文
top プロパティの基本的な構文は以下のとおりです。
window.top
それでは、HTML Window top プロパティの具体的な使用例を見ていきましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 30%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show{
font-size:1.2rem;
}
</style>
<body>
<h1>HTML Window topプロパティ デモ</h1>
<button onclick="create()" class="btn">現在のウィンドウが最上位かチェック</button>
<div class="show"></div>
<script>
function create(){
if(window.top === window.self){
document.querySelector('.show').innerHTML='現在のウィンドウは最上位のウィンドウです';
} else{
document.querySelector('.show').innerHTML='現在のウィンドウは最上位のウィンドウではありません';
}
}
</script>
</body>
</html>
実行結果
「現在のウィンドウが最上位かチェック」ボタンをクリックすると、現在のウィンドウが最上位（トップレベル）のウィンドウであるかどうかを確認できます。クリック後、画面上に判定結果が表示されます。
-
【HTML DOM】Window framesプロパティの使い方とサンプルコード
HTML DOM の Window frames プロパティは、現在のウィンドウ内に存在するすべてのフレーム（<iframe> 要素など）に対応するオブジェクトを返します。このプロパティを利用することで、ページ内の各フレームにプログラムからアクセスし、内容や URL（location）を操作できるようになります。構文構文は以下のとおりです。現在のウィンドウ内のフレームを取得する場合：window.framesframesプロパティのポイント配列風（Array-like）オブジェクト：length プロパティやインデックスによるアクセスが可能です。各要素は window オブジェクト
-
HTML DOM Window frameElementプロパティの使い方を徹底解説
HTML DOMのWindow frameElementプロパティは、現在のウィンドウが埋め込まれているHTML要素（<embed>、<iframe>、<object>など）を取得するためのプロパティです。ウィンドウがiframeなどの要素に埋め込まれていない場合（トップレベルウィンドウの場合）、このプロパティはnullを返します。そのため、ページがフレーム内で表示されているかどうかを判定したい場面で非常に役立ちます。構文frameElementプロパティの基本的な構文は以下のとおりです。window.frameElement使用例ここでは、HTML DOM