Question

是否可以检测页面输入时的情况以及同一页刷新

if (entered) alert("hi");
if (refreshed) alert("you've refreshed");

不知何故，在输入和刷新时页面渲染之间存在一些差异，并且检测案例要比为我调试它更容易（如果它甚至可能 - 可能是一些浏览器优化的东西导致它）。 / p>

Answer 1

这不是一个理想的解决方案，但是如果您的页面可以在5秒内加载，那么这将起作用，并假设您没有导航到另一个页面，那么在5秒内返回。

window.onbeforeunload = function(){
  window.sessionStorage.setItem('lastvisit', new Date().getTime());
}

var lastVisit = +window.sessionStorage.getItem('lastvisit');

var isRefresh = (new Date().getTime() - lastVisit) < 5000;
console.log(isRefresh);

Answer 2

没有完美的方法来跟踪重新加载和新页面加载，但此解决方案适用于大多数情况。将sessionStorage与卸载事件结合使用：

(function (win) {
  'use strict';
  var reloaded = false,
    ss = win.sessionStorage,
    offset = 1000, // 1 second, may need tweaking if
    // your page takes a long time to load/where
    // this code is located in your page
    now = function () {
    return (new Date()).getTime();
    },
    lastUnload = ss.getItem('lastunload'),
    loadStatus = document.getElementById('status');

  // sessionStorage returns null if nothing was stored
  if (lastUnload !== null) {
    // sessionStorage returns a string, +lastUnload
    // coerces the string held in lastUnload into an integer
    // see https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29
    if (+lastUnload + offset > now()) {
        reloaded = true;
    }
  }

  win.addEventListener('unload', function () {
    ss.setItem('lastunload', now());
  }, false);

  if (lastUnload === null) {
    loadStatus.innerHTML = 'First visit of session.';
  } else if (reloaded) {
    loadStatus.innerHTML = 'Page was reloaded.';
  } else {
    loadStatus.innerHTML = 'Navigated back to page after leaving';
  }

}(window));

此代码将页面重新加载定义为在离开页面后1秒内返回页面，因此如果有人离开页面并立即点击后退按钮但可能会出现真正不应发生的正常浏览行为，则可能会出现误报。如果你想提供更多或更少的余地，你可以修改offset变量，但1秒似乎是一个很好的默认值。

开发此代码后，我也发现了similar answer。

Answer 3

如果sessionStorage可用，您可以使用它。

if (!window.sessionStorage.getItem('visited')) {
    //entered
    window.sessionStorage.setItem('visited', true);
}
else {
    //refreshed
}

JS输入页面和刷新页面之间的区别

3 个答案: