Using "beforeunload" with live redirects

Questions / Help
1

Hello everyone,

I’m currently working on a page that features a live view, and I’m aiming to prevent users from accidentally leaving the page. To achieve this, I’m utilizing the beforeunload browser event in conjunction with a Phoenix hook. The structure of the hook is as follows:

export default function preventPageLeave() {
  const beforeUnloadListener = (event) => {
    // Prevent navigation and display a confirmation dialog
    event.preventDefault();
    event.returnValue = '';
  };

  return {
    mounted() {
      window.addEventListener("beforeunload", beforeUnloadListener, { capture: true });
    }
  };
}

This approach works seamlessly; however, I’m encountering a challenge when dealing with links on the page that use the link/1 function. For redirects managed by the Phoenix socket, which don’t necessitate a full page reload like navigation or patch operations, the beforeunload technique doesn’t prove effective.

Regrettably, I haven’t yet found an elegant solution to address this particular issue. I would greatly appreciate any insights or suggestions you might have.

Thank you in advance for your assistance!

1 Like
2

Maybe you could assign a class to link and then add event listener to all classes on the page?

3

Thanks for the reply, yes I tried this approach already something like this

On mount, I could do

      const links = document.querySelectorAll("a")
      for (var i = 0, len = links.length; i < len; i++) {
        links[i].addEventListener("click", triggerBeforeUnload);
      }

This works but I believe it is not the best idea, for example the live view might add new links to the dom on a certain user interaction which would not have the event listener and would therefore fail to intercept the event.

I feel like this is a common use case and there should be a elegant way to handle it.

4

Another option is If you are changing URL then you can listen for hashchange_event or popstate_event
Another option is MutationObserver