2

Let's say you have a DOM node and you want to know whether it is located inside an iframe or not. One way would be to check it's parent chain to see if you reached an iframe before reaching the parent window. However, I'd like to know if there is a faster way to do this.

user730569
  • 3,940
  • 9
  • 42
  • 68
  • Make a [fiddle](http://jsfiddle.net) with your html. – The Alpha Sep 09 '12 at 02:23
  • @SheikhHeera That won't help. Just know that I am given a random DOM node from a mutation event, and I want a quick way to know if it is inside an iframe. – user730569 Sep 09 '12 at 02:24
  • You want to check the node's existence from the parent page ? – The Alpha Sep 09 '12 at 02:25
  • 1
    Any events inside iframes are normally not propagated to the parent document, so how can you get a reference to a node inside an iframe (not even speaking of iframes from different domains)? Or do you want to test whether the whole page was loaded into an iframe? Testing the `ownerDocument` property might work, but it's hard to tell without more information / an example. – Felix Kling Sep 09 '12 at 02:27
  • @FelixKling If you have access to inside the iframe, you can bind a mutation event to the iframe's document. Then anything that triggers the mutation event will give you a reference to nodes inside the iframe – user730569 Sep 09 '12 at 02:30
  • @FelixKling I'm not sure what events not propagating to the parent window has to do with being able to reference a node inside an iframe , but yes the `ownerDocument` property is exactly what I was looking for. I can check the url of the property. Thanks. Write and answer and I'll accept it. – user730569 Sep 09 '12 at 02:34
  • Of course, if you have access to the nodes, then you can bind an event handler... I was just thinking that if you bind a handler to an ancestor, the handler does not receive events from inside the iframe... but anyways, now it's clear :) – Felix Kling Sep 09 '12 at 02:43
  • See http://stackoverflow.com/questions/4594492/to-check-parent-window-is-iframe-or-not or http://stackoverflow.com/questions/326069/how-to-identify-if-a-webpage-is-being-loaded-inside-an-iframe-or-directly-into-t – widged Sep 09 '12 at 02:44
  • @widged: That's different though... that's when you want to check from within the iframe whether the page is loaded inside an iframe. – Felix Kling Sep 09 '12 at 02:46
  • How to check with jquery - http://stackoverflow.com/questions/6781118/how-to-test-if-an-element-resides-in-an-iframe-using-jquery – widged Sep 09 '12 at 02:47
  • @FelixKling That's different... but a different way to approach the problem. Look for children rather than parents. Rather than determine if an element is within an iframe, get all iframe(s) elements in the page. If there is none, quick answer, no, the element is not within an iFrame. If there is one or more iframes, check if any contains the given element. – widged Sep 09 '12 at 02:54
  • 1
    @widged: Yeah, the link to the jQuery solution makes sense, but the first two links referring to testing `self` and `top` are not useful in this context. – Felix Kling Sep 09 '12 at 02:59
  • The first two links were an invitation for you to check if the question had not been answered before. The fewer repetitions, the more useful Stackoverflow is to the community :-) – widged Sep 12 '12 at 08:17

3 Answers3

7

You could probably check the ownerDocument property of the node:

if(node.ownerDocument !== document) {
    // node must be inside iframe
}
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • thanks, is there also a fast way to get a reference of the iframe it is inside, or do I need to iterate through all iframes? – user730569 Sep 09 '12 at 02:49
  • 4
    You can use [`document.defaultView`](https://developer.mozilla.org/en-US/docs/DOM/document.defaultView) and [`window.frameElement`](https://developer.mozilla.org/en-US/docs/DOM/window.frameElement): `node.ownerDocument.defaultView.frameElement` (doesn't seem to work in IE and below though). – Felix Kling Sep 09 '12 at 02:54
  • 5
    Unfortunately, this won't work if the script you are running is also in an iFrame. This will only indicate whether or not the element is in the same document as the script. – KenneyE Aug 12 '15 at 16:01
2

The best way that works for me is const isElementInsideIframe = document.location.ancestorOrigins.length https://developer.mozilla.org/en-US/docs/Web/API/Location/ancestorOrigins

Eugene Godun
  • 376
  • 3
  • 5
2

Another simple way is:

const isIframe = window.top !== window.self;
Prince Ahmed
  • 1,038
  • 10
  • 10