当有人试图刷新页面时,我想检查一下。

例如,当我打开一个页面什么都没有发生,但当我刷新页面时,它应该显示一个警告。


当前回答

if

event.currentTarget.performance.navigation.type

返回

0 =>用户刚刚输入了一个Url 1 =>页面重新加载 2 =>返回按钮单击。

其他回答

第一步是检查sessionStorage是否有一些预定义的值,如果存在,提醒用户:

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

第二步是将sessionStorage设置为某个值(例如true):

sessionStorage.setItem("is_reloaded", true);

会话值保持,直到页面关闭,所以它将工作,只有当页面重新加载在一个新的标签与网站。你也可以用同样的方法保持重载计数。

这里没有提到一个简单的解决方案(不依赖已弃用的window.performance.navigation):

使用窗口。onbeforeunload在用户离开页面(可能会刷新页面)时存储当前页面的时间和URL(在localstorage中)。

window.onbeforeunload = function(e)
{
    localStorage.setItem('reload-url', window.location.href);
}

然后使用window。Onload从本地存储中获取这些值。

window.onload = function(e)
{
    if (localStorage.getItem('reload-url') != null)) 
    {
        if (window.location.href == localStorage.getItem('reload-url'))
        {
            console.log('Reload');
        }
    }
}

如果最近的URL与存储的URL匹配,如果存储的时间与当前时间匹配(可能有一个微小的偏移),那么它是用户重新加载的页面。

我写了这个函数来同时检查两个方法,使用旧的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:点击Reload按钮或使用Location.reload()

2:使用浏览器历史记录(Bakc和Forward)。

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

4:任何其他方法。

在有人第一次访问该页面时存储一个cookie。刷新时检查你的cookie是否存在,如果存在,提醒。

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

在你的body标签中:

<body onload="checkFirstVisit()">
<script>
    
    var currpage    = window.location.href;
    var lasturl     = sessionStorage.getItem("last_url");

    if(lasturl == null || lasturl.length === 0 || currpage !== lasturl ){
        sessionStorage.setItem("last_url", currpage);
        alert("New page loaded");
    }else{
        alert("Refreshed Page");  
    }

</script>