onbeforeunload 事件不会在浏览器按钮点击时触发，而是在 CMD+R/F5 上工作

Question

I'm sure I'm missing something relatively simple - but for the life of me I can't find the answer. When trying to do a reload prevention in react , my onbeforeunload function is not firing when I press the reload button in the browser menu (Chrome). It works if I press CMD+R/F5 and once that's done once - the browser button also fires the function. It simply doesn't work if I attempt to click reload first. Additionally, if I navigate through the router once, it also seems to register. I am using the following code to register the refresh on my top level template:

class Template extends React.Component {
    constructor(props) {
        super(props);
    }

    refreshPrevent = (e) => {
        e.preventDefault();
        e.returnValue = true;
    }

    componentDidMount() {
        console.log("registering refresh handlers");
        window.addEventListener("beforeunload", this.refreshPrevent );
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", this.refreshPrevent);
    }

Any ideas would be appreciated.

Answer 1

I don't see any errors in your code. I use similar code in my react applications, but I hadn't tested this particular problem before until you posted.

It seems, according to the MDN documentation that this behavior is normal:

To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with. Moreover, some don't display them at all.

So, when your app first loads, until you interact with the page in some way, you can hit the browser refresh button and depending on the browser, the page will reload without displaying a prompt.

However, once you have done something on the page with your mouse or keyboard or via touch, then the prompt will be displayed.

The MDN documentation concludes (emphasis added):

Note also, that various browsers ignore the result of the event and do not ask the user for confirmation at all. In such cases, the document will always be unloaded automatically. Firefox has a switch named dom.disable_beforeunload in about:config to enable this behaviour. As of Chrome 60, the confirmation will be skipped if the user has not performed a gesture in the frame or page since it was loaded.

This fits with the spec that we should expect certain situations, like an uninteracted-with page plus refresh, to skip prompting the user:

The user agent is encouraged to avoid asking the user for confirmation if it judges that doing so would be annoying, deceptive, or pointless. A simple heuristic might be that if the user has not interacted with the document, the user agent would not ask for confirmation before unloading it.