How to check if iframe is visible from within the iframe

Question

I develop a widget that is expected to run on a partner's site as an iFrame. The iFrame is served up via a different domain than the parent's domain, so I cannot explicitly access their DOM.

The end-user can expand/collapse our widget using a button on the parent page. The parent page does not alert us when this happens or give us any way to tell the current status.

So I'm looking to see if there is some way around this by detecting from within our iFrame if the document is hidden. We use this information to determine if we need to send notifications to the end-user if our widget is hidden.

I've tried some things, like hookinh into the visibilitychange event, but it doesn't fire. I've also tried doing a hacky thing like getting the computed style of document.body but it doesn't seem to change based on whether the iFrame is hidden or not.

Answer 1

@andrew it will working only if its hidden by display: none. Visibility: hidden will report the proper width height values. Intersection observer will report true even if its hidden by display: none or visibility: hidden but it is in the viewport.