Sự kiện thoát khỏi trang chặn

Question

Khi chỉnh sửa trang trong hệ thống của tôi, người dùng có thể quyết định điều hướng đến một trang web khác và làm như vậy có thể mất tất cả các chỉnh sửa mà họ chưa lưu.

Tôi muốn chặn mọi nỗ lực truy cập trang khác và nhắc người dùng chắc chắn rằng họ muốn điều này xảy ra vì họ có khả năng mất công việc hiện tại của họ.

Gmail thực hiện việc này theo cách tương tự. Ví dụ: soạn email mới, bắt đầu nhập vào nội dung tin nhắn và nhập vị trí mới vào thanh địa chỉ (nói twitter.com hoặc gì đó). Nó sẽ hỏi "Bạn có chắc không?"

Ý tưởng cách sao chép nội dung này? Tôi đang nhắm mục tiêu IE8, nhưng cũng muốn tương thích với FF & Chrome.

Answer 1

Tương tự như câu trả lời Ghommey, nhưng điều này cũng hỗ trợ các phiên bản cũ của trình duyệt IE và Firefox.

window.onbeforeunload = function (e) { 
    var message = "Your confirmation message goes here.", 
    e = e || window.event; 
    // For IE and Firefox 
    if (e) { 
    e.returnValue = message; 
    } 

    // For Safari 
    return message; 
}; 

Answer 2

Xem bài viết này. Các tính năng mà bạn đang tìm kiếm là onbeforeunload

mẫu mã:

<script language="JavaScript"> 
    window.onbeforeunload = confirmExit; 
    function confirmExit() 
    { 
    return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"; 
    } 
</script> 

Answer 3

Thay vì một popup xác nhận gây phiền nhiễu, nó sẽ được tốt đẹp để chậm trễ rời chỉ là một chút (vài mili giây) để quản lý thành công đăng các dữ liệu chưa được lưu vào máy chủ, mà tôi quản lý cho trang web của tôi sử dụng bằng văn bản văn bản giả để giao diện điều khiển như thế này:

window.onbeforeunload=function(e){ 
    // only take action (iterate) if my SCHEDULED_REQUEST object contains data   
    for (var key in SCHEDULED_REQUEST){ 
    postRequest(SCHEDULED_REQUEST); // post and empty SCHEDULED_REQUEST object 
    for (var i=0;i<1000;i++){ 
     // do something unnoticable but time consuming like writing a lot to console 
     console.log('buying some time to finish saving data'); 
    }; 
    break; 
    }; 
}; // no return string --> user will leave as normal but data is send to server 

Edit: Xem thêm Synchronous_AJAX và làm thế nào để làm điều đó với jquery

Answer 4

Tôi có người dùng chưa hoàn thành tất cả dữ liệu bắt buộc.

<cfset unloadCheck=0>//a ColdFusion precheck in my page generation to see if unload check is needed 
var erMsg=""; 
$(document).ready(function(){ 
<cfif q.myData eq ""> 
    <cfset unloadCheck=1> 
    $("#myInput").change(function(){ 
     verify(); //function elsewhere that checks all fields and populates erMsg with error messages for any fail(s) 
     if(erMsg=="") window.onbeforeunload = null; //all OK so let them pass 
     else window.onbeforeunload = confirmExit(); //borrowed from Jantimon above; 
    }); 
}); 
<cfif unloadCheck><!--- if any are outstanding, set the error message and the unload alert ---> 
    verify(); 
    window.onbeforeunload = confirmExit; 
    function confirmExit() {return "Data is incomplete for this Case:"+erMsg;} 
</cfif>