Làm sao để khi bấm nút trở về của chrome hay safari mà dữ liệu của trang đó tải lại

#1

Em làm trang web bán hàng, khi bấm xác nhận xong sẽ dẫn tới 1 trang khác cảm ơn vì đã mua hàng blabla, ở trang đó em có button trở về trang đầu. bấm vào nút đó thì không sao, nhưng em bấm nút trở về của trình duyệt thì lại dữ liệu của trang đó còn y nguyên, vẫn có thể bấm nút xác nhận được luôn ạ, tuy nhiên bấm xong thì không next trang và cứ load mãi, nên em muốn khi mà bấm nút trở về thì trang đó được tải lại hay là mất hết dữ liệu rồi trở về trang đầu để nếu mà người dùng bấm nhầm thì đỡ bị lúng túng ạ

1 Like
#2

Mình nghĩ khi bạn ấn nút back của trình duyệt, nó kích hoạt 1 số sự kiện mà bạn không mong muốn.

Vì thế, bạn hãy sử dụng dòng code sau để chặn các sự kiện đó nhé:

document.onHistoryGo = function() { return false; }
8 Likes
#3

cảm ơn anh ạ, mà em cho vào jquery với ngoài thì không chạy được ạ.
Khi bấm nút trở về vẫn còn dữ liệu của trang ạ

1 Like
#4

Mình gợi ý và bạn tự tra cứu để làm nhé: khi bấm nút Submit form thì bạn dùng JavaScript loại bỏ luôn form khỏi DOM rồi mới submit. Như vậy, khi người dùng quay trở lại sẽ trống trơn, họ không thể submit thêm lần nào nữa vì form đã biến mất.

8 Likes
#5

cảm ơn anh ạ, em sẽ thử xử lý dữ liệu qua hướng này

1 Like
#6

Em cũng hay bị lỗi nhấn nút back của trình duyệt sau khi submit form thì trình duyệt vẫn lưu lại data cũ, có khi tự submit thêm lần nữa. Dùng thư viện thì phải event.preventDefault(). Không biết đây là tính năng hay là lỗi của HTML nữa.

#7

Đó là tính năng của trình duyệt. Cũng như việc trình duyệt hỗ trợ lưu Cookie, Session, LocalStorage và duy trì các kết nối của WebSocket cho bạn vậy.
Bạn có thử tải lại trang web sau khi nhấn nút Gửi (Submit) chưa? Trình duyệt sẽ hỏi bạn có muốn gửi lại dữ liệu trước đó hay không.

3 Likes
#8

cảm ơn các anh ạ, em đã xử lý được rồi ạ.
@ChauGiang bạn thử cái này giống mình xem có được không.
Đặt dòng code này vào js trang bạn muốn nó mất dữ liệu khi bấm nút back trở về là được nè.

if (window.performance && window.performance.navigation.type ==window.performance.navigation.TYPE_BACK_FORWARD) {
		location.href = '/';
	}
#9

Ngoài lề một chút, mình không biết các bạn xử lý FE thế nào nhưng đối với người làm BE như mình thì nên sử dụng one time code khi nhận request phía submit, vì có thể middleware chọc vào chạy tool submit cũng sẽ bị tình trạng tương tự. Dính đến tiền nong thanh toán nữa thì mệt mỏi lắm. Còn FE nếu được thì nên gắn capcha nữa khi thấy request nhiều lần.

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?