SYNCERのロゴ
アイキャッチ画像

Window.frames - フレーム

framesは、Windowのプロパティです。自分自身を含めた全てのフレームのウィンドウを返します。iframe要素などで開いた別のウィンドウはメインのフレームに対して、サブフレームと呼びます。

概要

名前
frames
所属
Window
IDL
[Replaceable] readonly attribute WindowProxy frames;
仕様書
https://html.spec.whatwg.org/multipage/window-object.html#dom-frames

説明

自分自身を含めた全てのフレーム。

返り値は自分自身を表すWIndowなのだが、インデックス番号で各フレームを参照できる。

チュートリアル

framesは、iframe要素などで開いた全てのウィンドウを返します。仕組みが少し特殊で、インデックス番号で各サブフレームを参照でき、オブジェクト自体はメインのフレームを返します。

<iframe src="..." id="hoge"></iframe>
<iframe src="..." id="fuga"></iframe>
<iframe src="..." id="piyo"></iframe>
// オブジェクトそのもの
frames ;	// Window (メインのフレーム)

// インデックス番号を参照
frames[0] ;	// iframe#hogeで開いたWIndow
frames[1] ;	// iframe#fugaで開いたWIndow
frames[2] ;	// iframe#piyoで開いたWIndow

インデックス番号を用いずにこのプロパティを参照すると、自分自身を表すWindowが返ります。

window === window.frames ;	// true

デモ

Window.framesのデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
body { word-break: break-all ; }
div#result { white-space: pre-wrap ; }

iframe {
	width: 90px ;
	height: 75px ;
}
</style>
</head>
<body>
<iframe src="./demo.html" id="hoge"></iframe>
<iframe src="./demo.html" id="fuga"></iframe>
<iframe src="./demo.html" id="piyo"></iframe>
<hr>
<div id="result"></div>
<script>
console.log( frames ) ;

appendText( frames + "\n\n" ) ;
appendText( "frames[0]: " + frames[0] + "\n" + "#" + frames[0].frameElement.id + "\n\n" ) ;
appendText( "frames[1]: " + frames[1] + "\n" + "#" + frames[1].frameElement.id + "\n\n" ) ;
appendText( "frames[2]: " + frames[2] + "\n" + "#" + frames[2].frameElement.id + "\n\n" ) ;

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>

</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月13日 (金)
コンテンツを公開しました。