数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 在离开网页时显示未保存更改的警告？
在本文中，我们将学习如何使用 javascript 和“beforeunload”事件监听器在离开网页时显示未保存更改的警告消息。
在处理任何类型的 Web 应用程序或表单时，都需要在用户离开包含未保存更改的页面之前向其提供警告消息。这可以防止意外数据丢失并改善整体用户体验。让我们通过一些示例来了解如何实现这一点。
示例 1
在本例中，我们将有一个包含多个输入元素的表单，并在窗口对象上添加一个“beforeunload”事件监听器来检测用户是否正在离开页面。在事件监听器回调函数内，我们将进行检查以确定用户在表单中是否有任何保存的更改。如果有，我们将显示一个提示，提示页面上存在未保存的更改，否则用户将继续离开页面。
文件名：index.html
<html lang="en">
<head>
<title>How to display warning before leaving the web page with unsaved changes using JavaScript?</title>
<style>
#myForm {
display: flex;
flex-direction: column;
width: 300px;
gap: 10px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" />
<input type="submit" value="Submit" />
</form>
<button id="refresh">Refresh the page!</button>
<script>
const form = document.getElementById('myForm');
const name = document.getElementById('name');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const submitBtn = document.querySelector('input[type="submit"]');
const refreshBtn = document.getElementById('refresh');
refreshBtn.addEventListener('click', e => {
e.preventDefault();
window.location.reload();
})
const initialFormState = {
name: name.value,
email: email.value,
subject: subject.value
};
submitBtn.addEventListener('click', e => {
e.preventDefault();
})
window.addEventListener('beforeunload', e => {
const currentFormState = {
name: name.value,
email: email.value,
subject: subject.value
}
if (JSON.stringify(initialFormState) !== JSON.stringify(currentFormState)) {
e.preventDefault();
e.returnValue = '';
}
})
</script>
</body>
</html>
示例 2
在本例中，我们将遵循上述代码结构，并使用 3 种不同的方法来显示离开网页前的警告消息，分别使用 onbeforeunload、pagehide 和 unload 事件。
文件名：index.html
<html lang="en">
<head>
<title>How to display warning before leaving the web page with unsaved changes using JavaScript?</title>
<style>
#myForm {
display: flex;
flex-direction: column;
width: 300px;
gap: 10px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" />
<input type="submit" value="Submit" />
</form>
<button id="refresh">Refresh the page!</button>
<script>
const form = document.getElementById('myForm');
const name = document.getElementById('name');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const submitBtn = document.querySelector('input[type="submit"]');
const refreshBtn = document.getElementById('refresh');
refreshBtn.addEventListener('click', e => {
e.preventDefault();
window.location.reload();
})
const initialFormState = {
name: name.value,
email: email.value,
subject: subject.value
};
submitBtn.addEventListener('click', e => {
e.preventDefault();
})
// Example 1: Using onbeforeunload Property
window.onbeforeunload = function() {
const currentFormState = {
name: name.value,
email: email.value,
subject: subject.value
};
if (JSON.stringify(initialFormState) !== JSON.stringify(currentFormState)) {
return 'You have unsaved changes. Are you sure you want to leave this page?';
}
};
// Example 2: Using pagehide event
window.addEventListener('pagehide', function(e) {
const currentFormState = {
name: name.value,
email: email.value,
subject: subject.value
};
if (JSON.stringify(initialFormState) !== JSON.stringify(currentFormState)) {
const confirmationMessage = 'You have unsaved changes. Are you sure you want to leave this page?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
});
// Example 3: Using onunload property
window.onunload = function() {
const currentFormState = {
name: name.value,
email: email.value,
subject: subject.value
};
if (JSON.stringify(initialFormState) !== JSON.stringify(currentFormState)) {
// Perform any necessary cleanup actions
}
};
</script>
</body>
</html>
结论
总之，使用 JavaScript 在离开包含未保存更改的网页之前实现警告消息对于提供更好的用户体验和防止意外数据丢失至关重要。通过遵循本文提供的示例 HTML 结构和 JavaScript 代码，我们学习了如何轻松地将此功能集成到我们的 Web 应用程序或表单中。
更新于： 2023年8月3日
2K+ 阅读量
广告