JavaScript - sự kiện bfcache/pageshow - event.persisted luôn đặt thành false?

Question

Trong một ứng dụng web Java/SpringMVC/JSP/jQuery chuẩn, tôi đang cố gắng phát hiện sự kiện "Quay lại" (hoặc history.go (-1)), để làm mới (AJAX) một thành phần/bảng tóm tắt nội dung khi tôi quay lại trang (nơi chúng tôi có thể thay đổi dữ liệu phụ trợ được hiển thị bởi thành phần tóm tắt).

Tôi đã thử các sau đây trong JavaScript (sau đây một số bài viết trên StackExchange lại làm thế nào để đạt được điều này):

<script type="text/javascript"> 
$(document).ready(function() { 
    window.onpageshow = function(event) { 
     console.log("Event:"); 
     console.dir(event); 
     if (event.persisted) { 
      alert("non-jQuery - back to page - loaded from bfcache"); 
     } else { 
      alert("non-jQuery - loaded page from server"); 
     } 
    }; 
    $(window).on("pageshow", function(event){ 
     console.log("Event:"); 
     console.dir(event); 
     if (event.originalEvent.persisted) { 
      alert("jquery - back to page - loaded from bfcache"); 
     } else { 
      alert("jquery - loaded page from server"); 
     } 
    }); 
}); 
</script> 

Tôi đang chạy OpenSUSE Linux và đã thử điều này với FireFox và Chrome (phiên bản mới nhất), nhưng mỗi thời gian thuộc tính của sự kiện là persisted được đặt thành false (Tôi có thể thấy điều này trong bảng điều khiển JavaScript và bằng thông báo bật lên từ mã trên). Bởi mỗi lần, tôi có nghĩa là, bất kể cho dù nó đã được tải từ máy chủ hoặc hiển thị một lần nữa thông qua nút Back (hoặc một 'Back' liên kết).

Ý định của tôi là thực hiện cuộc gọi AJAX để tải lại thành phần/bảng tóm tắt với dữ liệu cập nhật từ máy chủ nếu trang hiển thị qua nút Quay lại hoặc gọi history.go(-1).

Tôi cũng đã cố gắng thiết lập một handler dỡ bỏ (mà không làm gì) để ngăn không cho trang khỏi bị đưa vào bfcache nhưng nó vẫn dường như được thể hiện một phiên bản bf-cache và event.persisted (hoặc event.originalEvent.persisted) được thiết lập để false.

Tài sản này có được quản lý chính xác trên Linux không? Tôi đang làm điều gì đó ngu ngốc trong mã của tôi? Bất kỳ trợ giúp hoặc ý tưởng nào sẽ được đánh giá cao, cảm ơn!

Answer 1

Tôi biết điều này là hơi muộn nhưng công trình này cho tôi:

window.onpageshow = function(e) { 

    if (e.persisted) { 

     alert("Page shown"); 
     window.location.reload(); 
    } 
}; 

Tôi không nghĩ rằng bạn cần nó trong tài liệu chức năng đã sẵn sàng, chỉ cần sử dụng vani như trên.

Answer 2

Điều này có vẻ là bug in Chrome (cũng là present in IE11).

Tôi đã tìm thấy cách giải quyết như sau:

<input type="hidden" id="cacheTest"></input> 
<script> 
    var input = document.querySelector('#cacheTest') 

    if (input.value === "") { 
    // the page has been loaded from the server, 
    // equivalent of persisted == false 
    } 
    else { 
    // the page has been loaded from the cache, 
    // equivalent of persisted == true 
    } 

    // change the input value so that we can detect 
    // if the page is reloaded from cache later 
    input.value = "some value" 
</script> 

này khai thác thực tế là trong hầu hết các trình duyệt, khi trang web được tải từ bộ nhớ cache, các trường mẫu giá trị cũng được bảo tồn.

Answer 3

giữ mã dưới bất kỳ đâu trong tệp JS. Nó hạn chế các nút quay lại thông qua ra khỏi trang (hoặc hình thức).

window.onload = function() { window.history.forward(); }

Answer 4

tôi đã tìm thấy các nút nhập ẩn không phải là một giải pháp đáng tin cậy vì chúng có thể giữ giá trị sai khi người dùng điều hướng trở lại trang và sau đó chạm làm mới. Một số trình duyệt (Firefox) giữ lại các giá trị đầu vào khi làm mới để mỗi khi người dùng nhấn làm mới, nó sẽ làm mới lại vì nút đầu vào giữ giá trị sai. Đây là một kịch bản điển hình cho diễn đàn (người dùng xem chủ đề, nhấn nút quay lại để quay lại danh sách chủ đề và có thể tiếp tục nhấn làm mới để kiểm tra xem có chủ đề mới hay không).

Theo ghi nhận của Grégoire Clermont, event.persisted là lỗi trong chrome (và IE) và điều này vẫn chưa được khắc phục cho trình duyệt kể từ tháng 2 năm 2017. Tin vui là bạn có thể dựa vào window.performance.navigation.type == 2 cho chrome và IE. Trớ trêu thay, Firefox không đáng tin cậy cho điều này nhưng nó không quan trọng vì nó là đáng tin cậy cho event.persisted.Mã sau đây đã hoạt động cho tôi:

if (document.addEventListener) { 
    window.addEventListener('pageshow', function (event) { 
     if (event.persisted || window.performance && 
      window.performance.navigation.type == 2) 
     { 
      location.reload(); 
     } 
    }, 
    false); 
}