What methods is Facebook using to manage their onbeforeunload confirmation dialog?

Question

What methods is Facebook using to manage their onbeforeunload confirmation dialog?

While using Facebook on the latest Chrome browser on my Mac, I observed an interesting behavior. When I began typing in a comment box and then clicked on another link or pressed the back button, a confirmation window popped up asking if I wanted to leave:

As a seasoned developer, I always thought that the only way to handle such situations was by attaching an onbeforeunload event to the page. I knew you could simulate onbeforeunload with a global binding on anchors, but I was surprised to see Facebook's custom-styled confirmation instead of the usual bland one.

I wonder how they achieved this. Could it be related to HTML5 window history or pushState events?

javascript modal-dialog onbeforeunload

Answer 1

Answer №1

Hey there! I stumbled upon this solution on Stackoverflow over here.

This particular code snippet deals with the onbeforeunload event.
To experiment with this in your own browser, simply type the following into your console:

window.onbeforeunload = function() { return "Your work will be lost."; };

Then hit enter and test out the back button.

Now onto the actual solution:

Based on what I've tested, Facebook handles the situation of pressing the back button as described above, along with the cancelling of a comment by clicking on another link that triggers a div to appear on the page.

Edit

If we could somehow prevent the browser from navigating away from the AJAX context, this method might do the trick (enter it in the console):

window.onpopstate = function (event) {
 alert("location: " + document.location);
 event.preventDefault();
 return false;
}

I chose to share my insight here because unlike Facebook, this platform doesn't employ such functionality by default – which was your original query. But I do hope someone comes forward to challenge this!

Answer 2

Hey there! I stumbled upon this solution on Stackoverflow over here.

This particular code snippet deals with the onbeforeunload event.
To experiment with this in your own browser, simply type the following into your console:

window.onbeforeunload = function() { return "Your work will be lost."; };

Then hit enter and test out the back button.

Now onto the actual solution:

Based on what I've tested, Facebook handles the situation of pressing the back button as described above, along with the cancelling of a comment by clicking on another link that triggers a div to appear on the page.

Edit

If we could somehow prevent the browser from navigating away from the AJAX context, this method might do the trick (enter it in the console):

window.onpopstate = function (event) {
 alert("location: " + document.location);
 event.preventDefault();
 return false;
}

I chose to share my insight here because unlike Facebook, this platform doesn't employ such functionality by default – which was your original query. But I do hope someone comes forward to challenge this!

What methods is Facebook using to manage their onbeforeunload confirmation dialog?

Answer №1

Now onto the actual solution:

Edit

Similar questions

Using javascript, how can you fill in the missing dates within an array of objects?

Next.js application experiencing unexpected behavior with React state update and useEffect

Changing camera view in Three.js upon clicking an HTML button

Displaying a dynamic map with real-time coordinates sourced from a database using a combination of ajax and php

Completely triggering a forced refresh on a single page application, disregarding cache, service workers, and all other

jQuery.get() function is limited to specific types of webpages

Function that returns an Observable<Boolean> value is null following a catch block

3D Object Anchored in Environment - Three.js

What impact does adding 'ng' in unit tests have on how promises are handled?

Transmit responses from PHP script

Switch the jQuery overlay image upon clicking a button

Creating a query string using a jQuery array that contains multiple values for a query variable

The MUI Theming feature with primary color set to light seems to be causing confusion with the light color property

Mastering Cookies in Javascript

Fill up a dropdown menu in HTML when clicking on it

Sending information between two Angular 7 applications

Running the command Yarn build with Vite.js and React.js is encountering issues and is not functioning properly

ReactJS mixes up fetch URLs with another fetch_WRONG_FETCH

The Bcrypt hashed password does not match the password hash stored in Mongodb

Tips for preloading an ENTIRE webpage