Search code examples
javascriptonbeforeunload

onbeforeunload - Cannot make changes to page UI


In my onbeforeunload function we are automatically disconnecting an ActiveX control from a server.
This process takes about 3 or 4 seconds (we have no control over that) so I want to display a message to let the user know that their refresh/navigate away/close window will happen as soon as the control disconnects. I don't want to make an alert() pop up, and just want to have an "asynchronous" message displayed to the user.

However, I can't seem to make any changes to the page's UI from within the onbeforeunload. I can't use a toast message class I have or even change a "status" div, as they don't seem to be doing anything.

Is this a limitation of the onbeforeunload function? Is my only option to use an alert()?

Edit
Code example:

function handleWindowOnBeforeUnload() {
    //alert('Disconnecting from client...');    //Would rather not use an alert()
    ShowToast('Closing connection...');         //Doesn't show
    $('#statusDiv').html('Auto-disconnect...'); //Neither does this
    //This is what takes ~4 seconds
    acx.stopConnection();
}

Solution

  • This is a limitation of the onbeforeunload function.

    To be honest this approach is flawed and you should look at changing your app to not need a onbeforeunload function.

    You can detect a user disconnecting by long polling or web sockets if you need to disconnect something on the server. I am pretty sure this is the same for ActiveX.