Alerts when navigating away from a web page

Question

When I try to close my Google docs tab with unsaved changes, this is what I get in my browser (FF 3.5).

Are you sure you want to navigate away from this page?

You have unsaved changes in this document. Click Cancel now, then 'Save' to save them. Click OK now to discard them.

Press OK to continue, or Cancel to stay on the current page.

My question is whether such alerts are part of the web app (gdocs for eg.) or are they given out by the browser? If latter, how is this done?

Luben

Answer 1

By the browser. It's the beforeunload event handler that returns the customized text of the dialog, which is only the middle of the three paragraphs - the other two paragraphs as well as the text of the buttons cannot be customized or otherwise changed.

window.onbeforeunload = function(){ return 'Testing...' }

// OR

var unloadListener = function(){ return 'Testing...' };
window.addEventListener('beforeunload', unloadListener);

Will yield a dialog that says

Are you sure you want to navigate away from this page?

Testing...

Press OK to continue, or Cancel to stay on the current page.

You can nullify this by setting the handler to null

window.onbeforeunload = null;

// OR

window.removeEventListener('beforeunload', unloadListener);

Besmear

Thanks Peter. I have looked into how the modern browsers behave wrt the onbeforeunload event and posted my findings. Please add on any other intricate details that you know. – Luben

Hi Peter, is there no way we can tap into the event to yield a custom alert which provides the same functionality as the native window alert? – Laster

Not that I know of, no. – Besmear

@PeterBailey I suggest you updating your answer and use more modern addEventListener instead of onbeforeunload. Also, the event name is beforeunload, not onbeforeunload. – Clinandrium

@MichałPerłakowski, it seems that another answer is warranted (with your suggestions). – Hutchins

Answer 2

The alerts are part of the web application. View the source code and look at the javascript.

Bourgeoisie

I cannot see it in Google Docs source, at least. – Luben

It's likely buried in some obscure JavaScript file. Google uses scripts that make their JavaScript files essentially unreadable to a human. – Toxicant

before using alert, an event has to identified first. which "onBeforeUnload" – Nearly