浏览器离开页面弹窗插件：如何防止用户意外离开
以下是一个监听浏览器离开页面弹窗的示例插件：
<!DOCTYPE html>
<html>
<head>
<title>监听浏览器离开页面弹窗插件</title>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
</head>
<body>
<h1>监听浏览器离开页面弹窗插件</h1>
<p>试图离开页面前将会弹出一个警告框。</p>
<script>
// 监听浏览器离开页面事件
window.addEventListener('beforeunload', function (event) {
// 取消默认的警告框
event.preventDefault();
// Chrome需要返回一个值以触发警告框
event.returnValue = '';
// 弹出自定义的警告框
var confirmationMessage = '确定要离开此页面吗？';
(event || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
// 当用户点击其他链接或关闭页面时，会触发警告框
$(document).on('click', 'a', function () {
window.onbeforeunload = null;
});
// 当用户提交表单时，会触发警告框
$(document).on('submit', 'form', function () {
window.onbeforeunload = null;
});
</script>
</body>
</html>
这个插件使用JavaScript监听'beforeunload'事件，在用户试图离开页面时弹出一个警告框。用户可以选择取消离开页面或继续离开。点击页面上的其他链接或提交表单时不会触发警告框。
注意：由于安全原因，现代浏览器通常不允许自定义警告框的内容，而是显示默认的提示信息。因此，警告框的具体外观和内容可能因浏览器而异。
原文地址: https://www.cveoy.top/t/topic/o7lt 著作权归作者所有。请勿转载和采集!