Help us understand the problem. What is going on with this article?

[Javascript]iframeによって読み込まれているか判別する方法

はじめに

自分がiframeによって読み込まれているときだけ行いたい処理があったので、iframeによって読み込まれているかどうかを判別する方法を調べました。
自分用の備忘録も兼ねてまとめます。

結論

初めに結論です。

window != window.parent

で判別できます。
trueならiframeによって読み込まれているということになります。

解説

簡単に解説を書きます。

まず、iframeについてMDNに書かれていることをまとめると次のようになります。

  • iFrameは閲覧コンテキスト(browsing context)を表現する
  • 閲覧コンテキストは、セッション履歴(History)と文書(Document)をもつ
  • 他の閲覧コンテキストを埋め込んでる閲覧コンテキストは親閲覧コンテキストと呼ばれる
  • 最上位の閲覧コンテキストは、Windowオブジェクトで表される

image.png

つまり、
iFrameによって読み込まれている時、window.parentはiframeの親閲覧コンテキストになるので、windowにはなりません。

間違いや指摘があれば、コメントにお願いします。

ryo-gk
Web開発してます。 コンポーネントの設計、開発が好きです。
works-hi
「はたらく」を楽しく!に向けて大手企業の人事業務から変えていく HR業界のリーディングカンパニー
https://www.works-hi.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした