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

  • 1
    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. 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
  • 1
    @TylerDahle In a LEX Page, the disconnectedCallback or unrender method would only be called upon destruction of the component; simply changing tabs would not cause this to happen, as the component still exists. Unfortunately, I don't see an easy way out for this situation other than perhaps periodically pinging the server with status updates.
    – sfdcfox
    Jul 18 '19 at 16:36
  • 1
    The Playground link no longer works. What's the code in the html file of the LWC that calls onbeforeunload?
    – Paul N
    Sep 21 at 15:33
  • 1
    @PaulN Thanks for calling this out. I haven't migrated all of the links from Playground to WebComponents, but I have published all of my examples that were in Playground in this repo. I'll build a WC link for this, it should be a quick copy-paste. ... and done.
    – sfdcfox
    Sep 21 at 15:39

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.