◆ iframe のテスト用のページ
iframe のテスト用に iframe を使ってる簡単なページが欲しかったので用意しました
iframe-test

上側が同一オリジンのページで下側が異なるオリジンのページです

自身のフレームの取得

フレーム内から 親フレームのドキュメント内の自身を指す iframe を取得したいときはこの関数で取得できます

function getSelfFrame(){
for(const frame of window.parent.document.querySelectorAll("iframe")){
if(frame.contentWindow === window) return frame
}
return null
}

// <iframe src=​"/​-.html" width=​"600" height=​"300">​…​</iframe>​

やっていることは親フレームの iframe を全部を取得してそれぞれの window が自フレームの window と等しいかをチェックする単純なものです

もちろんできるのは同一オリジンのみです
別オリジンの場合は parent.document のところでアクセス不可のエラーになります


ところで あまり意味は無いですが オリジンが異なる状態でも親から見て自分がいくつめのフレームかを知ることは出来ます

iframe-test のページの下側の iframe の中で下のコードを実行します

window.parent[1] === window
// true
window.parent[0] === window
// false

せっかくわかるので何か使いみちを探したいのですが いまのところこれと言って思いつかないです