Detect iframe changes before server response

Question

Is it possible to detect when the contents of the iframe are about to change, for example, when the request begins (the result of a user clicking a link in an iframe), but the server has not yet sent a response?

Background:

I have an outdated web application that is being consumed in a container that does not show loading statuses. This web application also uses an iframe to simulate a partial page load. All navigation happens inside this iframe.

When the page loads in the iframe, I show the loading animation on the parent iframe page, tracking the iframe onreadstatechange event (IE only):

 $('#iframe').on('readystatechange', function () { var state = this.readyState; (state === 'loading' || state === 'interactive') && $('#loading').show(); state === 'complete' && $('#loading').hide(); }); 

However, this implementation has significant limitations. The problem occurs when there is a gap between the request and the response of the web server.

For example, if a user clicks on a link in an iframe that starts some kind of lengthy process, the animation of the status indicator is not displayed because the web server has not yet sent its response. Activation of the status indicator is displayed only after the server sends its response and a new page starts loading (where readyState === 'loading' ).

Thus, a net result is times when the user does not know that something is happening. In a typical web browser, when you click the link, the loading animation loads, even if the server takes time to respond. Since my web application is contained in the WinForms WebBrowser control (and I have no control over the WinForms application), there is no indication that the end user is doing anything.

Answer 1

Since both the iframe and parent pages have the same source, they can communicate with each other. All you have to do is bind the handler to the iframe event contentWindow onbeforeunload .

You will see “Loading ...” in the onbeforeunload contentWindow event - since this happens before the page starts navigating, and hide “Loading ...” in the iframe onload , since this happens after.

Here is a demo: http://jsfiddle.net/xga7Q/1/ click on the link that takes some time to download (for example, expand "Examples" and select any of the examples.