Làm cách nào để bật lên một hộp cảnh báo khi nút làm mới của trình duyệt được nhấp?

Question

Nếu người dùng làm mới trang được đề cập, nó sẽ thêm bản ghi khác vào cơ sở dữ liệu, vì vậy tôi muốn cảnh báo người dùng thông qua hộp cảnh báo nếu họ thực sự muốn làm mới trang và nếu họ nhấp vào ok thì trang sẽ được làm mới theo cách khác nếu họ bấm hủy bỏ nó sẽ không được.

Cách đặt loại cảnh báo này xuất hiện khi nút làm mới của trình duyệt được nhấp theo cách tương thích với trình duyệt chéo?

Answer 1

Bạn có thể làm điều đó như thế này:

window.onbeforeunload = function() { 
    return "Data will be lost if you leave the page, are you sure?"; 
}; 

này sẽ hiển thị một dấu nhắc cho người sử dụng cho phép họ hủy. Nó không làm mới cụ thể, nhưng cho mục đích của bạn (như chỉnh sửa một câu hỏi trên SO) mà không có vẻ quan trọng, đó là mất thông tin không có vấn đề nơi bạn đang để lại.

Answer 2

Không có một cách để buộc nó để chỉ những hành động làm mới, nhưng bạn có thể muốn xem xét window.onbeforeunload. Điều này sẽ cho phép bạn chạy một hàm trả về một chuỗi ngay trước khi trang được tải. Nếu chuỗi này không trống, thì hộp thoại xác nhận bật lên, chứa chuỗi này và một số văn bản soạn sẵn khác được cung cấp từ trình duyệt.

Ví dụ:

window.onbeforeunload = function() { 
    if (someConditionThatIndicatesIShouldConfirm) { 
     return "If you reload this page, your previous action will be repeated"; 
    } else { 
     return ""; 
    } 
} 

Cũng, nếu trang hiện tại đã được nạp thông qua một hoạt động POST, sau đó trình duyệt nên đã hiển thị một hộp thoại xác nhận khi người dùng cố gắng làm mới nó. Theo nguyên tắc chung, mọi hành động thay đổi trạng thái của dữ liệu trên máy chủ phải được thực hiện thông qua yêu cầu POST, thay vì một số GET.

Answer 3

Điều này là không thể. Điều tốt nhất bạn có thể làm là sử dụng sự kiện onbeforeunload nhưng điều đó sẽ kích hoạt bất kỳ sự kiện nào thoát khỏi trang hiện tại. Không thể nhắm mục tiêu nút làm mới cụ thể.

Xem ví dụ: this question trên onbeforeunload

Nó có thể là tốt hơn mặc dù để xây dựng một tấm séc trùng lặp vào cơ sở dữ liệu của bạn. Điều đó sẽ bắt được việc gửi ngẫu nhiên bằng cách sử dụng nút "quay lại".

Một giải pháp thay thế sẽ sử dụng mã thông báo một lần ngẫu nhiên được tích hợp vào biểu mẫu. Nếu hai hoạt động được cố gắng sử dụng cùng một mã thông báo, bạn sẽ dừng nó.

Answer 4

Có hai cách có thể chuyển tiếp với điều này, cả hai đều hoàn toàn khác nhau.

Một cách để có trình xử lý sự kiện được liên kết với sự kiện onbeforeunload để bạn có thể phát hiện khi người dùng là duyệt qua từ trang hiện tại. Tuy nhiên, nếu bộ nhớ của tôi phục vụ cho tôi một cách chính xác, onbeforeunload không nhất quán trên các trình duyệt (tôi không nghĩ Opera trả lời nó IIRC, nhưng không có cách nào để kiểm tra hiện tại). Tất nhiên, giải pháp này không thành công nếu người dùng tắt JavaScript.

Cách thứ hai và mạnh mẽ hơn là triển khai Post Redirect Get pattern khi được sử dụng, ngăn không cho dữ liệu được đăng lại khi người dùng làm mới trang.

Answer 5

bạn có thể sử dụng jquery cho điều này ... cho điều này, bạn phải đính kèm tập tin js của jquery.

<script> 
var count=0; 
$(document).ready(function(){ 
    alert("hi" + (count++)); 
    confirm("sure?") 
}); 
</script>