Có cách nào để ngăn sự kiện onbeforeunload kích hoạt khi sử dụng internet explorer

Question

Tôi có một chức năng giả sử kích hoạt khi người dùng đóng trình duyệt của họ và tôi đã đặt mã trong hàm "window.onbeforeunload". Điều này là mỗi khi tôi tải lại trang trong Internet Explorer, sự kiện onbeforeunload cũng sẽ kích hoạt đó là một vấn đề bởi vì tôi chỉ muốn nó kích hoạt chỉ khi người dùng đóng hoặc điều hướng khỏi trang hiện tại nhưng không phải trên làm mới/tải lại trang.

Vì vậy, tôi không chắc liệu onbeforeunload có dự định kích hoạt ngay cả khi làm mới/tải lại trang và nếu nó được dự định, thì có cách nào khác để làm việc vòng không? Cảm ơn

Answer 1

Không có cách nào thông minh để giải quyết. Bất kỳ hành động tải xuống nào trên trang sẽ kích hoạt sự kiện unload và beforeunload và không có cách nào để cho biết sự khác biệt giữa làm mới và điều hướng.

Bạn có thể thử một vài thứ, nhưng không có phương pháp 100%. Ví dụ, chụp F5 hay Ctrl +R phím sẽ xác định làm mới, mà bạn có thể bỏ đặt handler onbeforeunload, nhưng nó sẽ không làm việc cho những người dùng nhấp vào refresh/reload nút trên thanh công cụ của họ. Bạn có thể đính kèm trình xử lý sự kiện cho tất cả các lần nhấp vào một thành phần <a> hoặc bất kỳ <form>onsubmit, nhưng điều này sẽ không giúp người dùng nhập địa chỉ mới vào thanh địa chỉ từ trang của bạn.

Answer 2

Vì bạn đang dựa vào javascript như vậy, bạn có thể muốn xem xét giải quyết vấn đề là tại sao họ phải làm mới trang. Bạn có thể sử dụng XMLHttprequest để làm mới nội dung cho chúng để hàm onbeforeunload mong muốn chỉ được gọi khi nó cần.

Answer 3

Ngay cả khi bạn sử dụng XMLHttprequest để làm mới, IE vẫn gặp sự cố. Bạn phải gọi hàm javascript chứa XMLHttprequest, ví dụ:

<a href="javascript:void(0)" onclick="addContent();">click to add content</a> 

sẽ kích hoạt sự kiện onbeforeunload trên IE, chứ không phải trên Safari hoặc Firefox.

Một giải pháp mà sẽ làm việc trong một số trường hợp là để xử lý sự kiện này có điều kiện, tắt khi bạn muốn tải nội dung sau đó biến nó trở lại

var guard = true; 
function myOnbeforeunloadHandler() 
{ 
    if(guard) 
    { 
     return "you are about to leave the page and lose data"; 
    } 
} 

function addContent() 
{ 
    getElementById("myDiv").html = "<p>some content</p>"; 
    guard = true; 
} 

<a href="javascript:void(0) onclick="guard=false;addContent();> click to add content</a>