8

When browsing Facebook in the latest Chrome on OSX, I noticed that beginning to type in a comment box and clicking another link or pressing the back button triggers a confirmation window asking if I'd like to leave:

Facebook Confirmation Dialog

Being an old school developer, I had believed that the only possibility was to attach an onbeforeunload event to the page to handle the back button click. I know you can do a global binding on the anchors to simulate onbeforeunload, but I was surprised they managed to have a custom styled confirmation and not the stock, ugly looking confirmation dialog.

How did they do it? Is this some kind of HTML5 window history or pushState event trigger?

Corey Ballou
  • 42,389
  • 8
  • 62
  • 75
  • 2
    They're probably handling link clicks and `popstate` themselves and always suppressing the default action. – SLaks Feb 04 '14 at 15:35
  • As you can see here http://www.businessinsider.com/facebook-saves-stuff-you-start-typing-and-the-delete-2013-12 they have a much more higher logic and implement stuff like that question in their sleeps. ;) – loveNoHate Feb 04 '14 at 15:39
  • 1
    @SLaks it appears as though `popstate` is the likely culprit as you indicated. Hopefully someone posts up a proof of concept combining the two (link binding and popstate). https://developer.mozilla.org/en-US/docs/Web/API/Window.onpopstate – Corey Ballou Feb 04 '14 at 16:23
  • Ok, last thing. `popstate` does only work [on same document](https://developer.mozilla.org/en-US/docs/Web/API/Window.onpopstate), means you not only have to use `AJAX`, also an `.htacess` routing to for example all "documents" to `index.php`. Then you can prevent the event on your same page! – loveNoHate Feb 04 '14 at 17:11
  • Now Facebook used native dialog at least tested with Chrome Version 49.0.2623.110 m – Ezekiel Baniaga Apr 07 '16 at 16:30

1 Answers1

2

Ok, I found this answer on Stackoverflow here.

This handles the onbeforeunload.
To test this in your browser simply put

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

into your console, press enter and try the back button.

Now for your real answer:

Facebook handles the pressing of the back button in the above described way (as I tested out) and the cancel(l)ing of a comment by clicking on another link on the page with the div that pops up in your question.

Edit

If it would be possible to prevent the browser from leaving the AJAX context, this would work (add it in the console):

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

I answered here since facebook does not do it, which was your initial question. But I sincerely hope someone proves it wrong!

Community
  • 1
  • 1
loveNoHate
  • 1,549
  • 13
  • 21
  • `onbeforeunload` is not what I'm looking for. Thanks though. – Corey Ballou Feb 04 '14 at 16:23
  • I know, but when I click on the back button on facebook, when typing a comment, there only pops the ugly dialogue up!?! – loveNoHate Feb 04 '14 at 16:24
  • Similarly this concept with `popstate` does not work when leaving the page, only save in an `AJAX` environment, as my first link describes. First you would have to be able to disable the back button at all, to catch the event. But when you are leaving the `ajaxified` environment, your script gets lost with the click on the back button!?! – loveNoHate Feb 04 '14 at 16:36