区分F5或打开浏览器

Question

Is it possible to distinguish F5 or Open (click on link, paste URL in empty page or new tab, etc.) for Browser?

Why? Because I'd like to improve ergonomics of user interface. In my application some costly computations used to render a page. So page is cached and there is additional button on the page "Recalculate".

I don't like having additional "Recalculate" button when there are exactly the same standard "F5" button.

I control both Server & Client JS, is there any way to be notified about "F5" event?

It is important to detect all "F5" events and not miss it. But it is ok to have sometimes (sometimes but not frequently) additional false "F5" events - when Open Page has been mistakenly detected as "F5".

Answer 1

In your case, using sessionStorage sounds like your best option.

Something like:

var calculatedValues = (function() {
  var savedValues = sessionStorage.getItem("values");
  if (!savedValues) {
    // Do calculations
    var values = {
      result: 10
    };

    savedValues = JSON.stringify(values);
    sessionStorage.setItem("values", savedValues);
  }
  return JSON.parse(savedValues);
}());

sessionStorage should be unique for every window -- going to to the page under a different window will see no values and recalculate, but pressing F5 won't.

Some browsers will copy session values from one window to another when using Open in new tab on a link, but it sounds like that won't be an issue in this case.

Answer 2

Take a look on the keydown javascript event:

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/keydown

You can then use its key property to check for F5, and block the browser's reload with event.preventDefault

document.body.addEventListener("keydown", function(event) {
    if (event.key == "F5") {
        console.log("F5 Pressed!");
        //do your stuff here
        event.preventDefault();
    }
});

Fiddle: http://jsfiddle.net/ANC7e/