iframe のテスト用ページ
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ iframe のテスト用のページ
iframe のテスト用に iframe を使ってる簡単なページが欲しかったので用意しました
iframe-test
上側が同一オリジンのページで下側が異なるオリジンのページです
やっていることは親フレームの iframe を全部を取得してそれぞれの window が自フレームの window と等しいかをチェックする単純なものです
もちろんできるのは同一オリジンのみです
別オリジンの場合は parent.document のところでアクセス不可のエラーになります
ところで あまり意味は無いですが オリジンが異なる状態でも親から見て自分がいくつめのフレームかを知ることは出来ます
iframe-test のページの下側の 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>
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
// true
window.parent[0] === window
// false
せっかくわかるので何か使いみちを探したいのですが いまのところこれと言って思いつかないです