Hook into page unload in LWC/Lightning component?

Question

In a VF page, I can successfully hook into window.onbeforepageunload, but in LWCs and Lightning Components I am not really finding a way to do this.

In a Lightning Component hosted on a VisualForce page, I put a console.log in the unrender function and preserved my console through navigations. No log showed up when I navigated off the page.

In an LWC hosted on a VisualForce page, I put a console.log in the disconnectedCallback function and did not get any log when I navigated away from the page.

Is there anyway to detect the page changing or closing inside the LWC or Lightning Component and execute some javascript before it happens?

Answer 1

In both Aura and Web Components, you simply add an event listener to window directly.

// Aura: controller //
doInit: function(component, event, helper) {
  window.addEventListener('beforeunload', helper.beforeUnloadHandler.bind(helper));
}
// Aura: helper //
beforeUnloadHandler(event) {
  console.log('before unload handler has been called.');
}

---

// LWC
connectedCallback() {
  window.addEventListener('beforeunload', this.beforeUnloadHandler.bind(this));
}

beforeUnloadHandler(event) {
  console.log('before unload handler has been called.');
}

All Window events should be supported, but some do not technically make sense (e.g. do not listen for DOMContentLoaded, because it will have already fired by the time your component comes in to existence).

I wrote a WebComponents example for LWC.

Note that for Aura, you must wrap your function within a $A.getCallback if you wish to interact with the Aura life cycle (e.g. firing events).