发表新帖
发表新帖

Check if page gets reloaded or refreshed in JavaScript

前端 未结
关注
12 2877
遇见更好的自我
遇见更好的自我 2020-11-21 22:57

I want to check when someone tries to refresh a page.

For example, when I open a page nothing happens but when I refresh the page it should display an alert.

相关标签:
12条回答
  • 别跟我提以往
    2020-11-21 23:37

    I found some information here Javascript Detecting Page Refresh . His first recommendation is using hidden fields, which tend to be stored through page refreshes. 

    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>

    0 讨论(0)
  • 广开言路
    2020-11-21 23:38

    First step is to check sessionStorage for some pre-defined value and if it exists alert user:

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

    Second step is to set sessionStorage to some value (for example true):

    sessionStorage.setItem("is_reloaded", true);

    Session values kept until page is closed so it will work only if page reloaded in a new tab with the site. You can also keep reload count the same way.

    0 讨论(0)
  • 梦毁少年i
    2020-11-21 23:43

    if 

    event.currentTarget.performance.navigation.type

    returns

    0 => user just typed in an Url
    1 => page reloaded
    2 => back button clicked.

    0 讨论(0)
  • 臣服心动
    2020-11-21 23:45

    Append the below Script in Console:

    window.addEventListener("beforeunload", function(event) { 
     console.log("The page is redirecting")           
     debugger; 
});
    0 讨论(0)
  • 小鲜肉
    2020-11-21 23:46

    New standard 2018-now (PerformanceNavigationTiming)

    window.performance.navigation property is deprecated in the Navigation Timing Level 2 specification. Please use the PerformanceNavigationTiming interface instead.

    PerformanceNavigationTiming.type

    This is an experimental technology.

    Check the Browser compatibility table carefully before using this in production.

    Support on 2019-07-08

    The type read-only property returns a string representing the type of navigation. The value must be one of the following:

    • navigate — Navigation started by clicking a link, entering the URL in the browser's address bar, form submission, or initializing through a script operation other than reload and back_forward as listed below.

    • reload — Navigation is through the browser's reload operation or location.reload().

    • back_forward — Navigation is through the browser's history traversal operation.

    • prerender — Navigation is initiated by a prerender hint.

    This property is Read only.

    The following example illustrates this property's usage.

    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);
  }
}
    0 讨论(0)
  • 南方客
    2020-11-21 23:47 
    <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>
    0 讨论(0)
 看不清?
提交回复
热议问题