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?

  • is onbeforepageunload a typo? the event is called beforeunload. i quickly tested a vf page and both (addEventlistener & window.onbeforeunload = ) showed me the confirmation dialog on switching a tab after a couple of reloads – Renji-xD Jul 17 '19 at 21:31
  • Sorry, yes. Onbeforeunload I meant. But it works fine on a VF page, but my issue is finding out how to do something similar inside an LWC or lightning component, not relying on the beforeunload in the VF page – Tyler Dahle Jul 17 '19 at 22:01

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 Playground 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).

  • This seems to be the way to go, but one thing of concern (and it is kind of outside of my original question since I was initially asking about VF hosted components), but in Pure lightning page, the beforeunload never seems to fire when you just switch to a different lightning tab, or even click a lookup link on a record. – Tyler Dahle Jul 18 '19 at 14:42
  • @TylerDahle In LEX, the page never unloads, as it is a Single Page Application. For that use case, we can use lightning:unsavedChanges instead. – sfdcfox Jul 18 '19 at 15:49
  • Does that force a dialog a user has to interact with? I just need to quietly and silently execute JavaScript and let the user be on their way. – Tyler Dahle Jul 18 '19 at 15:59
  • @TylerDahle What's the context for what you're trying to do, exactly? Are they in LEX? A VF page in LEX? Console? There are different solutions to various contexts, and I suppose a few contexts where developers can't do anything. The circumstances at hand change the solution. – sfdcfox Jul 18 '19 at 16:06
  • We are just trying to collect usage stats on unload. On VF page it's fine because unload actually works. Or maybe that is just VF pages in classic? But we do have lightning components on lightning pages that suffer from this limitation. Unrender isn't even firing on my component when I tab away in LEX. – Tyler Dahle Jul 18 '19 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.