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

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

javascript

检查页面是否在JavaScript中重新加载或刷新,javascript,page-refresh,Javascript,Page Refresh,我想检查是否有人试图刷新页面例如，当我打开一个页面时，什么也不会发生，但当我刷新页面时，它会显示一个警报。我在这里找到了一些信息。他的第一个建议是使用隐藏字段，这些字段往往通过页面刷新来存储函数checkRefresh（）{ 如果（document.refreshForm.visted.value==“”）{ //这是一个新的页面加载 document.refreshForm.visted.value=“1”； //您可能需要在此处添加特殊代码 //新页面加载 }否则{ //这是页面刷新

我想检查是否有人试图刷新页面

例如，当我打开一个页面时，什么也不会发生，但当我刷新页面时，它会显示一个警报。

我在这里找到了一些信息。他的第一个建议是使用隐藏字段，这些字段往往通过页面刷新来存储

函数checkRefresh（）{
如果（document.refreshForm.visted.value==“”）{
//这是一个新的页面加载
document.refreshForm.visted.value=“1”；
//您可能需要在此处添加特殊代码
//新页面加载
}否则{
//这是页面刷新
//在此处插入代码，表示要对其执行的操作
//刷新
}
}

在有人第一次访问页面时存储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()">

第一步是检查一些预定义值，如果存在，则提醒用户：

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

第二步是设置某个值（例如

true

）：

会话值一直保留到页面关闭，所以只有在页面重新加载到站点的新选项卡中时，会话值才会起作用。您也可以以相同的方式保持重新加载计数。

⚠️⚠️⚠️ <代码>窗口.性能.导航.类型已弃用，请参阅

了解页面是否实际被重新加载的更好方法是使用大多数现代浏览器支持的navigator对象

它使用

//检查导航定时API支持
if（窗口性能）{
console.info（“window.performance在此浏览器上运行良好”）；
}
console.info（performance.navigation.type）；
if（performance.navigation.type==performance.navigation.type\u重载）{
console.info（“此页面已重新加载”）；
}否则{
console.info（“此页面未重新加载”）；
}

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

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

window.onbeforeunload = UnLoadWindow;

如果

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

现在新标准2018（性能激活时间）

window.performance.navigation

属性在规范中已弃用。请改用界面

这是一个很好的例子

在生产中使用之前，请仔细检查

2019-07-08支持

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

导航-通过单击链接、在浏览器地址栏中输入URL、表单提交或通过脚本操作初始化（而不是重新加载和后退）来启动导航，如下所示
重新加载-导航通过浏览器的重新加载操作或
后退\u前进-通过浏览器的历史遍历操作进行导航
预渲染-导航由

此属性是只读的

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

功能打印\导航\定时\数据（）{
//使用getEntriesByType（）仅获取“导航”事件
var perfEntries=performance.getEntriesByType（“导航”）；
对于（变量i=0；i

我编写此函数是为了同时使用旧的

window.performance.navigation

和新的

performance.getEntriesByType（“导航”）

检查这两种方法：

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:预渲染活动，如

4:任何其他方法。

以下是几乎所有浏览器都支持的方法：

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

if (sessionStorage.getItem('reloaded') != null) {
    console.log('page was reloaded');
} else {
    console.log('page was not reloaded');
}

sessionStorage.setItem('reloaded', 'yes'); // could be anything

它使用会话存储来检查页面是第一次打开还是刷新。


<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>

var currpage=window.location.href；
var lasturl=sessionStorage.getItem（“最后一个url”）；
if（lasturl==null | | lasturl.length==0 | | currpage！==lasturl）{
setItem（“最后一个url”，currpage）；
警报（“加载新页面”）；
}否则{
警报（“刷新页面”）；
}

在控制台中附加以下脚本：

window.addEventListener("beforeunload", function(event) { 
     console.log("The page is redirecting")           
     debugger; 
});

没有服务器端代码是不可能的。你需要它做什么？也许如果你能给我们一个更大的图景，我们可以建议更好的选择。也许你可以做一些类似饼干的事情。。。比如存储时间和重新加载时比较时间差。我想让facebook之类的链接会#/任何我想移除的东西！重新加载页面时only@Ahmed我正试着做同样的事情。以下任何解决方案对您有效吗？⚠️⚠️⚠️

window.performance.navigation.type

已弃用，请参阅。我们还可以通过检查

Referer

属性进行检查，并根据此属性修改服务器响应。请注意：该页面上列出的第一个方法将失败，因为该代码是

if (sessionStorage.getItem('reloaded') != null) {
    console.log('page was reloaded');
} else {
    console.log('page was not reloaded');
}

sessionStorage.setItem('reloaded', 'yes'); // could be anything

<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>

window.addEventListener("beforeunload", function(event) { 
     console.log("The page is redirecting")           
     debugger; 
});