如何使用 JavaScript 在离开带有未保存更改的网页之前显示警告？

onbeforeunload事件处理程序用于处理beforeunload事件。每当窗口即将卸载其资源时都会触发此事件。此事件的结果取决于用户选择继续或取消操作。此事件可用于检查用户是否按照此方法留下了未完成的表单或未保存的表单。

页面上的每个表单字段都用于通过调用函数来更新它们各自的变量。每当beforeunload被触发时，都会检查这些变量，从而检查用户是否试图在不保存更改的情况下离开页面。如果表单为空，它不会提醒用户，因为用户尚未开始填写表单。

句法：

// Event listener for the 'beforeunload' event
window.addEventListener('beforeunload', function (e) {

    // Check if any of the input fields are filled
    if (fname !== '' || lname !== '' || subject !== '') {

        // Cancel the event and show alert that
        // the unsaved changes would be lost
        e.preventDefault();
        e.returnValue = '';
    }
});

例子：

HTML

  

    
        .container {
            border: 2px dotted;
            width: 60%;
            border-radius: 5px;
            padding: 10px;
        }
  
        input,
        textarea {
            width: 90%;
            padding: 10px;
            margin: 10px;
        }
  
        .submit-btn {
            background-color: green;
            color: white;
            padding: 10px;
        }
    

  

    
        GeeksforGeeks
    
  
    
        The page will notify if the user has
        started filling the form and tries
        to navigate away from it.
    
  
    
        A Demo Contact Form
        
            First Name
  
            
            
  
            Last Name
            
  
            Subject
                    
  
            
                Submit
            
        
    
  
    
  
        // Variables to store the input text
        let fname = '';
        let lname = '';
        let subject = '';
  
        // Functions to update the input text
        updateFname = () => {
            fname = document
                .getElementById('fname').value;
        }
  
        updateLname = () => {
            lname = document
                .getElementById('lname').value;
        }
  
        updateSubject = () => {
            subject = document
                .getElementById('subject').value;
        }
  
        // Event listener for the 
        // 'beforeunload' event
        window.addEventListener('beforeunload', 
                                function (e) {
  
            // Check if any of the input
            // fields are filled
            if (fname !== '' ||
                lname !== '' ||
                subject !== '') {
  
                // Cancel the event and
                // show alert that the unsaved
                // changes would be lost
                e.preventDefault();
                e.returnValue = '';
            }
        });
    

  

输出：