How to detect when page is in a loading state inside of iframe

JavaScript
1

We have a webpage that contains an iframe containing a large third-party website (with sameorigin allowed). Whenever a user clicks on something inside of the iframe, it takes a long time before that next page inside the iframe is shown. During those few seconds, the user doesn’t get shown any loading indicators since the page that’s loading is inside of the iframe.

How can I detect that the iframe is loading, so that I can display a loading indicator outside of the iframe?

2

Could you do this:


.holds-the-iframe {
  background:url(../images/loader.gif) center center no-repeat;
}

<div class="holder">
  <iframe src=".."></iframe>
</div>

Ref: https://stackoverflow.com/questions/8626638/how-to-display-loading-message-when-an-iframe-is-loading

2 Likes
3

Hey Pullo, cool idea, just implemented and works beautifully!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.