186

Tôi muốn kiểm tra khi ai đó cố gắng làm mới một trang.

Ví dụ, khi tôi mở một trang, không có gì xảy ra nhưng khi tôi làm mới trang thì nó sẽ hiển thị cảnh báo.

javascript page-refresh

— Ahmed
nguồn

1

Không thực sự có thể mà không có mã phía máy chủ. Mày cần nó để làm gì? Có lẽ nếu bạn đưa ra bức tranh lớn hơn, chúng tôi có thể đề xuất thay thế tốt hơn.

— Shadow Wizard là Ear For You

Có lẽ bạn có thể làm như vậy với một cookie ... như lưu trữ thời gian và tải lại so sánh chênh lệch thời gian.

— Felix Kling

Tôi muốn làm như liên kết facebook sẽ là #! / Bất cứ điều gì tôi muốn xóa #! khi trang chỉ tải lại

— Ahmed

1

@AHmed Tôi đang cố gắng làm điều tương tự. Có bất kỳ giải pháp dưới đây làm việc cho bạn?

— Paul Fitzgerald

3

Không window.performance.navigation.typeđược chấp nhận, xin vui lòng xem câu trả lời của tôi .

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

221

Không window.performance.navigation.typeđược chấp nhận, vui lòng xem câu trả lời của

Một cách tốt hơn để biết rằng trang thực sự được tải lại là sử dụng đối tượng điều hướng được hầu hết các trình duyệt hiện đại hỗ trợ.

Nó sử dụng API thời gian điều hướng .

//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");
  }

Mở rộng đoạn trích

nguồn: https://developer.mozilla.org/en-US/docs/Web/API/Navlation_timing_API

— La Mã
nguồn

1

cảm ơn bạn thân, đây là giải pháp chính xác để phát hiện trang được tải lại từ nhấp chuột phải / làm mới từ trình duyệt hoặc được tải lại bởi url.

— Roque Mejos

4

Hãy nhận biết. Gần đây đã thay đổi hành vi này. Khi người dùng nhấp vào thanh địa chỉ hiện tại và nhấn enter, giá trị của Performance.navlation.type sẽ là 1, bằng 0. Tôi đã thử nghiệm trong Phiên bản 56. Không chắc tại sao.

— Jackwin tung

1

Cách thức hoạt động của nó là như mong đợi, bất kỳ tương tác nào với trang buộc trạng thái điều hướng mới đến cùng một trang đều được coi là làm mới. Vì vậy, tùy thuộc vào mã của bạn, điều này cực kỳ hữu ích, để đăng ký mỗi khi trang được làm mới, tải lại hoặc bất kỳ tương tác ajax nào. Tôi có thể cung cấp cho rất nhiều sử dụng cho các chức năng và phân tích.

— raphie

27

performance.navigation.type == performance.navigation.TYPE_RELOADdễ đọc hơn thay vì == 1. Ngoài ra, nếu bạn kiểm tra, performance.navigationbạn sẽ thấy rằng có 4 loại điều hướng khác nhau như TYPE_BACK_FORWARD,TYPE_NAVIGATE

— Vitalij Kornijenko

5

Không window.performance.navigation.typeđược chấp nhận, xin vui lòng xem câu trả lời của tôi .

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

37

Bước đầu tiên là kiểm tra sessionStoragemột số giá trị được xác định trước và nếu nó tồn tại cảnh báo người dùng:

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

Bước thứ hai là đặt sessionStoragethành một số giá trị (ví dụ true):

sessionStorage.setItem("is_reloaded", true);

Giá trị phiên được giữ cho đến khi trang được đóng để nó chỉ hoạt động nếu trang được tải lại trong một tab mới với trang web. Bạn cũng có thể tiếp tục tải lại theo cùng một cách.

— DitherSky
nguồn

28

Hai điều cần lưu ý: 1). Bạn chỉ có thể lưu trữ giá trị chuỗi trong phiên và lưu trữ cục bộ. Do đó trueđược chuyển đổi thành "true". 2). Lưu trữ phiên vẫn tồn tại cho đến khi người dùng đóng cửa sổ trình duyệt, do đó bạn không thể biết sự khác biệt giữa tải lại trang và điều hướng khỏi và quay lại trang web của bạn trong cùng một phiên trình duyệt.

— Hector

35

Tiêu chuẩn mới 2018-now (PerformanceNavulationTiming)

window.performance.navigationthuộc tính không được dùng trong đặc tả cấp 2 của Timing Timing . Vui lòng sử dụng PerformanceNavigationTiminggiao diện thay thế.

PerformanceNavulationTiming.type

Đây là một công nghệ thử nghiệm .

Kiểm tra bảng tương thích trình duyệt cẩn thận trước khi sử dụng trong sản xuất.

Hỗ trợ vào 2019-07-08

Thuộc tính chỉ đọc kiểu trả về một chuỗi đại diện cho loại điều hướng. Giá trị phải là một trong những điều sau đây:

điều hướng - Điều hướng bắt đầu bằng cách nhấp vào một liên kết, nhập URL vào thanh địa chỉ của trình duyệt, gửi biểu mẫu hoặc khởi tạo thông qua thao tác tập lệnh ngoài tải lại và back_forward như được liệt kê bên dưới.
tải lại - Điều hướng là thông qua hoạt động tải lại của trình duyệt hoặc location.reload().
back_forward - Điều hướng là thông qua hoạt động truyền tải lịch sử của trình duyệt.
prerender - Điều hướng được bắt đầu bởi một gợi ý prerender .

Khách sạn này chỉ đọc.

Ví dụ sau minh họa việc sử dụng tài sản này.

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);
  }
}

— ИИяяяяяяя
nguồn

4

+1 để chỉ ra API không dùng nữa, nhưng -100 cho Apple vì sự thiếu hỗ trợ của họ trong iOS vẫn còn vào năm 2020

— kinakuta

14

Lưu trữ cookie lần đầu tiên khi ai đó truy cập trang. Khi kiểm tra làm mới nếu cookie của bạn tồn tại và nếu có, hãy cảnh báo.

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!');
  }
}

và trong thẻ cơ thể của bạn:

<body onload="checkFirstVisit()">

— techfoobar
nguồn

9

Còn người dùng cũ thì sao?

— Red Taz

5

Giống như @ Rob2211 cho biết điều này chỉ kiểm tra xem trang đã được truy cập chưa và có thể cho kết quả dương tính giả miễn là trang được xem lại khi cookie vẫn còn tồn tại. Không sử dụng điều này để kiểm tra làm mới.

— Brannon

@Brannon - Cookie là một cookie được tạo mà không có giá trị hết hạn và sẽ bị hủy khi đóng trình duyệt.

— techfoobar

1

@Techfoobar bắt đẹp. Điều này sẽ không gây ra vấn đề nếu người dùng truy cập lại trang web trước khi cookie đó bị phá hủy?

— Brannon

3

@Brannon - Có, nếu trình duyệt bị bỏ ngỏ và người dùng truy cập lại sau một thời gian, nó sẽ không được coi là một lượt truy cập mới.

— techfoobar

7

nếu

event.currentTarget.performance.navigation.type

trả lại

0 => người dùng vừa nhập vào Url
1 => trang đã tải lại
2 => nút quay lại đã nhấp.

— nPcomp
nguồn

Tôi đã nhận được lỗi này, bạn có thể giải thích nó nhiều hơn? Uncaught TypeError: Không thể đọc thuộc tính 'currentTarget' không xác định

— Janatbek Sharsheyev

2 => TYPE_BACK_FORWARD Trang được truy cập bằng cách điều hướng vào lịch sử. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavulation

— Tiago Freitas Leal

performance.navigation.typekhông được chấp nhận, xin vui lòng xem câu trả lời của tôi .

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

6

Tôi tìm thấy một số thông tin ở đây Phát hiện trang Javascript Làm mới . Đề xuất đầu tiên của anh ấy là sử dụng các trường ẩn, có xu hướng được lưu trữ thông qua làm mới trang.

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>

Mở rộng đoạn trích

— VoronoiPotato
nguồn

Chúng tôi cũng có thể kiểm tra bằng cách kiểm tra thuộc Referertính và sửa đổi phản hồi của máy chủ trên cơ sở của tài sản này

— Adeel

Lưu ý bên lề: phương pháp đầu tiên được liệt kê trên trang đó sẽ thất bại vì mã đang thực thi trước khi DOM được phân tích cú pháp. Di chuyển <script>phần tử xuống dưới cùng sẽ hoạt động - nhưng nó vẫn không phải là một giải pháp được đảm bảo (và cũng không phải là phương pháp cookie).

— Andy E

1

@Adeel: kiểm tra Referercũng không đáng tin cậy; nhiều proxy và phần mở rộng trình duyệt loại bỏ nó khỏi các yêu cầu.

— Andy E

@VoronoiPotato Hãy cố gắng tóm tắt thông tin thay vì chỉ đăng một liên kết.

— Dallin

1

Đối với tôi, nó luôn luôn thực thi phần "nếu" và không bao giờ thực thi phần "khác", không quan trọng là tôi đã tải trang hay làm mới trang.

— Parth Vora

6

Tôi đã viết hàm này để kiểm tra cả hai phương thức sử dụng cũ window.performance.navigationvà mới performance.getEntriesByType("navigation")cùng một lúc:

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

Mô tả kết quả:

0: nhấp vào liên kết, Nhập URL vào thanh địa chỉ của trình duyệt, gửi biểu mẫu, Nhấp vào dấu trang, khởi tạo thông qua thao tác tập lệnh.

1: Nhấp vào nút Tải lại hoặc sử dụngLocation.reload()

2: Làm việc với lịch sử lông mày (Bakc và Forward).

3: hoạt động prerendering như<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4: bất kỳ phương pháp nào khác.

— Ali Sheikhpour
nguồn

1

Tôi tìm thấy một số thông tin ở đây Phát hiện trang Javascript Làm mới

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

window.onbeforeunload = UnLoadWindow;

— Manpreet
nguồn

3

đây là đâu" ? bạn đã quên liên kết?

— ᴄʀᴏᴢᴇᴛ

0

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

— Alexis Gatuingt
nguồn

Kiểm tra xem trang có được tải lại hoặc làm mới bằng JavaScript không

Tiêu chuẩn mới 2018-now (PerformanceNavulationTiming)

PerformanceNavulationTiming.type

Hỗ trợ vào 2019-07-08

Ví dụ sau minh họa việc sử dụng tài sản này.