Location.ancestorOrigins - 祖先のオリジン

2017/10/08

ancestorOriginsは、Locationのプロパティです。ロケーションの全ての祖先オリジンを含むDOMStringListを返します。例えば、あるページ(親ページ)からiframe要素で別ドメインのページ(子ページ)を表示している場合、子ページの祖先オリジンには、親ページのオリジンが含まれます。インラインフレームが入れ子の場合、複数の祖先オリジンを持ちます。

概要

名前

ancestorOrigins

所属

Location

IDL

[Unforgeable, SameObject] readonly attribute DOMStringList ancestorOrigins;

仕様書

https://html.spec.whatwg.org/multipage/history.html#dom-location-ancestororigins

説明

全ての祖先のオリジンを含むDOMStringListを返す。自身のオリジンは含まない。近いオリジンから遠いオリジンの順にインデックスされる。

チュートリアル

Location.ancestorOriginsは、近くから遠くの順にした祖先オリジンの集合を返します。

syncer.jp

<iframe src="//www.syncer.ch/page.html"></iframe>

www.syncer.ch/page.html

<iframe src="//syncer.ch/page.html"></iframe>

syncer.ch/page.html

var domStringList = location.ancestorOrigins ;	// DOMStringList

domStringList[0] ;	// "www.syncer.ch" (1つ親)
domStringList[1] ;	// "syncer.jp" (2つ親)

デモ

Location.ancestorOriginsのデモです。iframe要素を使って、"syncer.jp"、"www.syncer.ch"、"syncer.ch"と入れ子構造のインラインフレームを作り、最後の"syncer.ch"でプロパティの値を参照しています。

<!DOCTYPE html>
<html>
<head>
	<style>
body { white-space: pre-wrap ; }
	</style>
</head>
<body><p>syncer.ch</p><hr><script>
var domStringList = location.ancestorOrigins ;

console.log( domStringList ) ;
document.body.appendChild( new Text( domStringList + "\n" ) ) ;

for ( var i=0, l=domStringList.length; l>i; i++ ) {
	document.body.appendChild( new Text( "[" + i + "]: " + domStringList[i] + (domStringList[i].id ? "#" + domStringList[i].id : "") + "\n" ) ) ;
}
</script></body>
</html>