I have the following code.
<html>
<body>
<div>
<iframe>
<html>
<body>
content
</body>
</html>
</iframe>
</div>
</body>
</html>
I want to show wait cursor until the content of the iframe is fully loaded. I have control over both the html.
Generally when I implement this I fill the iframe with a static HTML file with the ajax loader cursor in there. I then use jquery to change the IFRAME's source (src tag). Then the net result is that you get a loading dialog while the browser is loading the next page.
This depends on your implementation of the frame code though. If it's just a large page loading and you have javascript in the background loading you may be better off putting the image on the same page, then simply hiding it when your document is "ready". That is pretty easy to do with jquery.
You can write a simple function to change the cursor for the body (or whatever):
$('body').css('cursor', 'pointer');
Altho I am not sure if you can have iframe onload work correctly for all browsers.
$("#iFrameId").load(function (){
// do something once the iframe is loaded (disable busy cursor, etc)
});
Check the following SO question => How do I fire an event when a iframe has finished loading in jQuery?
If your iFrame is loading in the beginning of your page load then use:
$(document).ready(function () {
$('body').css('cursor', 'wait');
});
And use onload function of iframe to change the cursor back:
$('#iFrameID').on('load', function () {
$('body').css('cursor', 'default');
});
