184

我想检查何时有人尝试刷新页面。

例如，当我打开一个页面时，什么也没有发生，但是当我刷新页面时，它应该显示一个警报。

javascript page-refresh

— 艾哈迈德
source

1

没有服务器端代码，这实际上是不可能的。您需要什么？也许您能提供更大的前景，我们可以建议更好的选择。

— 暗影巫师为您耳边

也许您可以使用Cookie来做类似的事情...就像存储时间并在重新加载时比较时差。

— Felix Kling

我想使诸如Facebook链接成为＃！/我要删除的任何东西！仅在页面重新加载时

— Ahmed

1

@Ahmed我正在尝试做同样的事情。以下任何解决方案对您有用吗？

— 保罗·菲茨杰拉德

3

⚠️⚠️⚠️ window.performance.navigation.type已过时，请看我的回答。

— ИльяЗеленько

219

⚠️⚠️⚠️ window.performance.navigation.type已过时，请参阅ИльяЗеленько的答案

知道页面实际已重新加载的更好方法是使用大多数现代浏览器支持的navigator对象。

它使用了Navigation Timing API。

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
  if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
  } else {
    console.info( "This page is not reloaded");
  }

展开摘要

来源：https : //developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

— 拉胡尔·贾恩（Rahul Jain）
source

1

谢谢朋友，这是一种准确的解决方案，可以检测是从浏览器的右键单击/刷新中重新加载页面还是由URL重新加载页面。

— 罗克·梅霍斯

4

请注意。Chrome最近更改了此行为。当用户单击当前地址栏并按Enter时，Performance.navigation.type的值将为1，应为0。我在版本56中进行了测试。不知道为什么。

— 董文治

1

它们的工作方式符合预期，与页面的任何将新导航状态强制到同一页面的交互都被视为刷新。因此，这取决于您的代码，这在每次刷新，重新加载页面或进行任何ajax交互时进行注册非常有用。我可以为功能和分析提供很多用途。

— raphie

26

performance.navigation.type == performance.navigation.TYPE_RELOAD更容易阅读，而不是== 1。另外，如果你检查performance.navigation你会发现，有4种不同势导航类型，如TYPE_BACK_FORWARD，TYPE_NAVIGATE

— Vitalij Kornijenko

5

⚠️⚠️⚠️ window.performance.navigation.type已过时，请参见我的回答。

— ИльяЗеленько

37

第一步是检查sessionStorage一些预定义的值，以及是否存在警报用户：

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

第二步是设置sessionStorage一些值（例如true）：

sessionStorage.setItem("is_reloaded", true);

会话值会一直保持到页面关闭为止，因此只有在页面重新加载到网站的新标签页中时，会话值才有效。您也可以以相同的方式保持重载计数。

— 颤抖的天空
source

28

有两件事要注意：1）。您只能将字符串值存储在会话和本地存储中。因此true转换为"true"。2）。会话存储将一直持续到用户关闭浏览器窗口为止，因此您无法分辨页面重新加载与同一浏览器会话中的站点导航之间的区别。

— 赫克托2015年

35

新标准2018-现在（PerformanceNavigationTiming）

window.performance.navigationNavigation Timing Level 2规范中已弃用该属性。请改用该界面。PerformanceNavigationTiming

PerformanceNavigationTiming.type

这是一项实验技术。

检查浏览器兼容性表在生产环境中使用此功能之前，仔细。

于2019-07-08支持

type只读属性返回一个表示导航类型的字符串。该值必须是以下之一：

导航 —通过单击链接，在浏览器的地址栏中输入URL，提交表单或通过脚本操作（如下所示的reload和back_forward除外）来初始化导航。
reload —通过浏览器的reload操作或进行导航location.reload()。
back_forward-导航通过浏览器的历史记录遍历操作。
prerender —导航由prerender提示启动。

此属性为只读。

以下示例说明了此属性的用法。

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}

— ИльяЗеленько
source

3

+1表示已弃用的API，但-100表示苹果对iOS的缺乏支持将持续到2020年

— kinakuta

14

第一次访问该页面时存储cookie。刷新时，检查您的cookie是否存在，如果存在，则发出警报。

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

并在您的身体标签中：

<body onload="checkFirstVisit()">

— 技术傻瓜
source

9

回头用户呢？

— Red Taz 2012年

5

就像@ Rob2211所说的那样，这只会检查是否已访问该页面，并且只要cookie仍然存在，只要重新访问该页面就可以给出假肯定。不要使用此检查刷新。

— 布兰农

@Brannon-cookie是创建的，没有任何过期值，并且在关闭浏览器时将被销毁。

— techfoobar

1

@techfoobar很不错。如果用户在销毁该cookie之前重新访问该网站，这是否还会造成问题？

— 布兰农

3

@Brannon-是的，如果浏览器保持打开状态，并且用户在一段时间后重新访问，它将不会被视为新访问。

— techfoobar

7

如果

event.currentTarget.performance.navigation.type

退货

0 =>用户刚刚输入网址
1 =>重新加载页面
2 =>单击了后退按钮。

— nPcomp
source

我收到此错误，您能进一步解释吗？未捕获到的TypeError：无法读取未定义的属性“ currentTarget”

— Janatbek Sharsheyev，2017年

2 => TYPE_BACK_FORWARD通过导航到历史记录来访问该页面。 developer.mozilla.org/zh-CN/docs/Web/API/PerformanceNavigation

— Tiago Freitas Leal，

performance.navigation.type已弃用，请参见我的回答。

— ИльяЗеленько

6

我在这里找到了一些信息Javascript Detection Page Refresh。他的第一个建议是使用隐藏字段，这些字段通常通过页面刷新进行存储。

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}

<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>

展开摘要

— Voronoi土豆
source

我们还可以通过检查Referer属性进行检查，并根据该属性修改服务器响应

— Adeel

旁注：该页面上列出的第一个方法将失败，因为代码是在解析DOM之前执行的。将<script>元素移到底部将可以工作-但是仍然不能保证解决方案（cookie方法也不是）。

— 安迪E

1

@Adeel：检查Referer也不可靠；许多代理和浏览器扩展程序将其从请求中删除。

— Andy E

@VoronoiPotato请尝试汇总信息，而不是仅发布链接。

— 达林2015年

1

对我来说，它总是执行“ if”条件，而从不执行“ else”部分，这与我是否进行页面加载或页面刷新无关。

— Parth Vora

6

我已经写了这个功能，使用旧的同时检查方法window.performance.navigation和新的performance.getEntriesByType("navigation")在同一时间：

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

结果描述：

0：单击链接，在浏览器的地址栏中输入URL，提交表单，单击书签，通过脚本操作进行初始化。

1：单击“重新加载”按钮或使用Location.reload()

2：处理浏览历史记录（Bakc和Forward）。

3：预渲染活动<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4：任何其他方法。

— 阿里·谢库普尔
source

1

我在这里找到了一些信息Javascript检测页面刷新

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;

— 曼普雷特
source

3

这里是什么地方” ？您忘记了链接吗？

— ᴄʀᴏᴢᴇᴛ

0

if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}

— 亚历克西斯·加图特（Alexis Gatuingt）
source

检查页面是否在JavaScript中重新加载或刷新

新标准2018-现在（PerformanceNavigationTiming）

PerformanceNavigationTiming.type

于2019-07-08支持

以下示例说明了此属性的用法。