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

2020/10/18 15:01 · javascript ·  · 0评论

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

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

⚠️⚠️⚠️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");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
  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

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

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

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

sessionStorage.setItem("is_reloaded", true);

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

新标准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);
  }
}

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

我已经写了这个功能,使用旧的同时检查方法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="//example.com/next-page.html">

4:任何其他方法。

如果

event.currentTarget.performance.navigation.type

退货

0 =>用户刚刚输入一个网址

1 =>重新加载页面


2 =>单击了后退按钮。

我在这里找到了一些信息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>

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

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

window.onbeforeunload = UnLoadWindow;
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

它使用SessionStorage来检查页面是第一次打开还是刷新。

<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>
本文地址:http://javascript.askforanswer.com/jianchayemianshifouzaijavascriptzhongzhongxinjiazaihuoshuaxin.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!