How to extract target hostname during onbeforeunload event

Question

I'd like to warn the user when he/she tries to navigate away from my webapp when his/her project is unsaved. Currently I don't care about edit boxes which are currently under edit. I know the project's dirty state from the session.

I quickly realized that if I set a function for the window.onbeforeunload, it'll disturb the user even if he/sh navigates to another page within my webapp. In such case no disturbance needed, the session will be still alive.

I tried a solution derived from Fire onbeforeunload only when window is closed (includes working example)

window.onbeforeunload = function (e) {
    var targetHost = new URL(e.target.URL).hostname;
    if (targetHost != window.location.host)
        return "Project is unsaved!!!";
    else
        return null;
};

The new URL(e.target.URL).hostname results in (at least on IE11):

JavaScript runtime error: Object doesn't support this action

And mysteriously I can't find anything about no new URL(e.target.URL).hostname by any search.

But at the same time I hope this is not impossible, I cannot believe others didn't experience this.

My question could be generic, but actually the webapp is an ASP.NET MVC 5 site. That's how mainly IE11 comes along. — Csaba Toth, Jul 19 '15 at 18:11

score 2 · Accepted Answer · edited Dec 07 '17 at 10:37

There are two problems in your script:

window.onbeforeunload = function (e) {
    var targetHost = new URL(e.target.URL).hostname;
    if (targetHost != window.location.host) {
        return "Project is unsaved!!!";
    else
        return null;
};

The first is that you did not close your if. The second is that e.target.URL is apparently not supported by IE. You need to have an A and a B plan.

A plan: Applies to the case when e.target.URL exists. In this case, you handle the case as you initially implemented, but with the syntax fix mentioned above.

B plan: Applies to the case when e.target.URL does not exist. For this case, you should assume that the user leaves the site. You can improve the approach by adding knowledge when the user uses your control to navigate, for instance, you know that a given anchor will stay on the site. In this case, you can define a click event and set a boolean value to true (and the default value of that boolean should be false...), so that later your onbeforeunload event will know that your user stayed on the site even if he or she uses IE.

So you need a logic like this:

var targetHost = !!e.target.URL ? (new URL(e.target.URL).hostname) : ((myFlag) ? (window.location.hostname) : ("elsewhere"));

Thanks Lajos for the directions. I corrected the if, and I'll look how could I introduce a flag. Although that wouldn't handle the case when someone would edit the URL pointing to another subpage. — Csaba Toth, Jul 19 '15 at 18:10

How to extract target hostname during onbeforeunload event

1 Answers1