Làm cách nào để buộc tải lại một trang khi sử dụng nút quay lại của trình duyệt?

Tôi cần phát hiện bằng cách nào đó rằng người dùng đã nhấn nút quay lại của trình duyệt và tải lại trang bằng cách làm mới (tải lại nội dung và CSS) bằng jquery.

Làm thế nào để phát hiện hành động đó thông qua jquery?

Bởi vì ngay bây giờ một số phần tử không được tải lại nếu tôi sử dụng nút quay lại trong trình duyệt. Nhưng nếu tôi sử dụng các liên kết trong trang web thì mọi thứ đều được làm mới và hiển thị chính xác.

QUAN TRỌNG!

Một số người có lẽ đã hiểu sai những gì tôi muốn. Tôi không muốn làm mới trang hiện tại. Tôi muốn làm mới trang được tải sau khi nhấn nút quay lại. đây là ý tôi nói một cách chi tiết hơn:

1. người dùng đang truy cập trang1.
2. khi đang ở trang1 - anh ấy nhấp vào liên kết đến trang2.
3. anh ấy được chuyển hướng đến trang2
4. bây giờ (Phần quan trọng!) anh ấy nhấp vào nút quay lại trong trình duyệt vì anh ấy muốn quay lại trang1
5. anh ấy đã quay lại trang1 - và bây giờ trang1 đang được tải lại và có thông báo gì đó như "Bạn đã quay lại!"

Bạn có thể sử dụng pageshowsự kiện để xử lý tình huống khi trình duyệt điều hướng đến trang của bạn thông qua truyền qua lịch sử:

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // Handle page restore.
    window.location.reload();
  }
});

Lưu ý rằng bộ nhớ cache HTTP cũng có thể liên quan. Bạn cần đặt tiêu đề HTTP có liên quan đến bộ đệm thích hợp trên máy chủ để chỉ lưu vào bộ đệm những tài nguyên cần được lưu vào bộ đệm. Bạn cũng có thể làm tải lại buộc phải trình duyệt instuct bỏ qua HTTP cache: window.location.reload( true ). Nhưng tôi không nghĩ rằng đó là giải pháp tốt nhất.

Để biết thêm thông tin, hãy kiểm tra:

• Làm việc với BFCache bài viết trên MDN
• WebKit Page Cache II - Sự kiện dỡ bỏ của Brady Eidson
• pageshow tham khảo sự kiện trên MDN
• Câu hỏi cập nhật Ajax, nút quay lại và DOM
• JavaScript - bfcache / pageshow event - event.persisted luôn được đặt thành false? câu hỏi

Đã lâu kể từ khi điều này được đăng nhưng tôi đã tìm thấy một giải pháp thanh lịch hơn nếu bạn không cần hỗ trợ các trình duyệt cũ.

Bạn có thể kiểm tra với

performance.navigation.type

Tài liệu bao gồm hỗ trợ trình duyệt có tại đây: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

Vì vậy, để xem liệu trang có được tải từ lịch sử hay không, bạn có thể làm

if(performance.navigation.type == 2){
   location.reload(true);
}

Biểu tượng 2cho biết trang đã được truy cập bằng cách điều hướng vào lịch sử. Các khả năng khác là-

0:Trang được truy cập bằng cách nhấp vào liên kết, dấu trang, gửi biểu mẫu hoặc tập lệnh hoặc bằng cách nhập URL vào thanh địa chỉ.

1:Trang được truy cập bằng cách nhấp vào nút Tải lại hoặc thông qua phương thức Location.reload ().

255: Bất kỳ cách nào khác

Thông tin chi tiết tại đây: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

Lưu ý Performance.navigation.type hiện không được dùng nữa để thay thế cho PerformanceNavigationTiming.type , trả về 'điều hướng' / 'tải lại' / 'back_osystem' / 'Pre -veloper': https://developer.mozilla.org/en-US/docs/Web / API / PerformanceNavigationTiming / type

Chỉ cần sử dụng jquery:

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

Ở trên sẽ hoạt động 100% khi nút quay lại hoặc chuyển tiếp được nhấp bằng ajax.

nếu không, phải có cấu hình sai trong một phần khác của tập lệnh.

Ví dụ: nó có thể không tải lại nếu một cái gì đó giống như một trong những ví dụ trong bài trước được sử dụng window.history.pushState('', null, './');

vì vậy khi bạn sử dụng history.pushState(); hãy chắc chắn rằng bạn sử dụng nó đúng cách.

Đề xuất trong hầu hết các trường hợp, bạn sẽ chỉ cần:

history.pushState(url, '', url); 

Không có window.history ... và đảm bảo rằng url được xác định.

Hy vọng rằng sẽ giúp ..

Vì performance.navigationhiện không được dùng nữa, bạn có thể thử cách này:

var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}

Bạn nên sử dụng đầu vào ẩn làm chỉ báo làm mới, với giá trị là "không":

<input type="hidden" id="refresh" value="no">

Bây giờ sử dụng jQuery, bạn có thể kiểm tra giá trị của nó:

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

Khi bạn nhấp vào nút quay lại, các giá trị trong các trường ẩn vẫn giữ nguyên giá trị như khi bạn rời trang ban đầu.

Vì vậy, lần đầu tiên bạn tải trang, giá trị của đầu vào sẽ là "không". Khi bạn quay lại trang, nó sẽ là "có" và mã JavaScript của bạn sẽ kích hoạt làm mới.

Một giải pháp thay thế đã giải quyết được vấn đề đối với tôi là tắt bộ nhớ cache cho trang. Điều đó làm cho trình duyệt lấy trang từ máy chủ thay vì sử dụng phiên bản được lưu trong bộ nhớ cache:

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

Hiện tại đây là cách tải lại trang cập nhật nhất nếu người dùng nhấp vào nút quay lại.

const [entry] = performance.getEntriesByType("navigation");

// Show it in a nice table in the developer console
console.table(entry.toJSON());

if (entry["type"] === "back_forward")
    location.reload();

Xem tại đây để biết nguồn

Tải lại rất dễ dàng. Bạn nên sử dụng:

location.reload(true);

Và phát hiện trở lại là:

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});

Sử dụng thẻ meta sau trong tệp tiêu đề html của bạn, Điều này phù hợp với tôi.

<meta http-equiv="Pragma" content="no-cache">

Tôi đã tìm thấy câu trả lời tốt nhất và nó đang hoạt động hoàn hảo cho tôi

chỉ cần sử dụng tập lệnh đơn giản này trong liên kết của bạn

<A HREF="javascript:history.go(0)">next page</A>

hoặc sự kiện nhấp vào nút

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

khi bạn sử dụng điều này, bạn làm mới trang của mình trước rồi chuyển sang trang tiếp theo, khi bạn quay lại, nó sẽ có trạng thái được làm mới lần cuối.

Tôi đã sử dụng nó khi đăng nhập CAS và cung cấp cho tôi những gì tôi muốn. Hy vọng nó giúp .......

chi tiết tìm thấy từ đây