Disable Browser Button Until Page Finish Loading

I have an apex application but because the form page has so much data to render from individual record and sometimes if you don't have the patient to wait for that extra 2-6 second

Solution 1:

The ideal method is to display a modal popup dialog on the screen that prevents user from clicking anything on the screen.

jQuery UI Modal Dialog demo: http://jqueryui.com/resources/demos/dialog/modal.html

And in that modal, show something like, "Loading page. Please wait."

And no, you cannot disable browser buttons. Its a no-no.

Solution 2:

It is not possible to disable browser buttons, but you can add code to disable inputs in the client/server side.

Disable in HTML:

<button id="mybutton" disabled="disabled"></button>

Disable in javascript:

document.getElementById('mybutton').disabled=true;

Disable with jQuery:

$("#mybutton").attr("disabled","disabled");

Override window unload:

<script language="JavaScript">
    window.onbeforeunload = confirmClose;
    function confirmClose() {
        return "Are you sure to close this page?";
    }
</script>

Solution 3:

You don't actually want to be able to disable browser buttons. That would mean anyone can. Imagine an attack site that did this. That would be a nightmare.

The closest thing you can do is to bind on beforeunload, but that probably won't help so much. Otherwise make the backend handle this better.

I think naveen's answer is good. That is something you should consider implementing, but I think it is a good idea to make the backend resilient to user impatience anyway. In this case it might be good to allow the data to be progressively loaded, or at least make it not throw errors when the navigation gets cancelled. I don't know your system design, so I can't really make specific recommendations in that regard.