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.

Answer 2

Note that you may have a correct server configuration as internal server errors may come from other reasons.

You have to see what happens in the background by enabling logs. For this, see the How i can logging messages from asp.net core application in specific file on linux? and Logging in .NET Core and ASP.NET Core to know how to enable it on linux. And then you can find the main problems.

Answer 3

You have an internal server error, It's not an error from the server config. The application return a 500. In terminal you can write

journalctl -u [YourServiceName].service --since '2021-MM-DD hh:mm:ss'

to get the lasts errors of your app. Fix it, re-deploy.