How to find out whether an element is in a hidden iframe

Question

Using jQuery, one can easily find out whether a particular element is visible using

$(element).is(':visible')

While having some limitations (doesn't cover css visibility hidden or the actual visibility in the viewport, ie whether it's covered by other elements or scrolled away), I find it being useful for my scenario. The catch is, it only works within one iframe.

If the element has any parent within its document with display:none; , it returns false. If the whole document is included in an iframe which has display:none , it returns true. Is it possible to somehow detect this in another way ?

Answer 1

Hmm, seems like you have to call top (parent) document within an iframe, then search for specific iframe and check if it's visible.

You'll probably have to have same domain/subdomain for this to work, but anyway:

Let's assume you know iframe id/class (you have to).

if ($(top).find('#iframeID').is(':visible')) {
  // iframe is visible
} else {
 // iframe is NOT visible
}

Can't guarantee correct work.

Answer 2

似乎该窗口的frameElement属性可在所有浏览器中使用，并提供包含该窗口的当前iframe（如果不适用跨域限制，我就是这种情况）。

Answer 3

not possible afaik. an iframe is basically a different site and as such guarded against xss. simply don't use iframes but server-side includes.