Interrupting self.location = "/some/url" to create a fade overlay.

[themusicalduck]

I have an application that runs autonomously and displays webpages along with video and other media.

The webpages cycle by calling self.location = "/some/url" in javascript.

I would like to make transitions between pages look smoother by overlaying a grey widget and fading it in and out. I can't really make it work because I can't figure out how to interrupt the pageload. So what happens is the page changes over to the new one and a moment later it fades out and then in again.

webengineview.stop() stops the page but reload doesn't seem to work after, and if I load the URL again the URL changed event (which I am using to trigger the fade) will cause it to loop. Trying to sleep the webengineview thread doesn't work because it's on the same thread as the overlay widget.

I thought that running on url change event:

webengineview.setUpdatesEnabled(false);
//do the fade here
webengineview.setUpdatesEnabled(true);
webengineview.update();

might work, but it either doesn't make any difference, or makes the whole page disappear instead.

I have implemented javascript websocket communication which means that I can create a function that is callable within the javascript for opening URLs and implement it there, but a lot of the pages that are going to be displayed use self.location and it cannot be easily changed.

Any thoughts on how I can implement something like this?

Thanks.