📌  相关文章
📜  HTML | returnValue 事件属性(1)

📅  最后修改于: 2023-12-03 15:31:15.077000             🧑  作者: Mango

HTML | returnValue 事件属性

简介

returnValue 是一个事件属性，通常用于 onbeforeunload 事件中。当用户尝试关闭网页或离开网页时，浏览器会触发 onbeforeunload 事件，可以利用 returnValue 属性来显示一个确认对话框，询问用户是否真的希望关闭或离开当前页面。

使用方法
语法
window.event.returnValue = message;
参数
  • message：字符串，可以自定义显示在确认对话框中的提示信息。
返回值
  • 如果 returnValue 属性被设置为一个非空字符串，则浏览器会显示一个确认对话框，询问用户是否关闭或离开当前页面，并将 message 参数的内容作为提示信息显示在确认对话框中。
  • 如果 returnValue 属性被设置为一个空字符串或未设置，则浏览器不会显示确认对话框，而是直接关闭或离开当前页面。
示例

以下是一个基本的示例，使用 onbeforeunload 事件和 returnValue 属性来弹出确认对话框，提示用户是否真的希望关闭或离开当前页面。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>returnValue 事件属性示例</title>
</head>
<body>
	<h1>returnValue 事件属性示例</h1>
	<p>在离开当前页面或关闭网页时，将弹出确认对话框。</p>
	<script>
		window.onbeforeunload = function() {
			window.event.returnValue = "确认离开当前页面吗？";
		}
	</script>
</body>
</html>
注意事项
  • returnValue 属性只能用于 onbeforeunload 事件中，不能用于其他事件。
  • 由于 onbeforeunload 事件的特殊性，一些浏览器会忽略 returnValue 属性的设置，或者将其设置为固定的默认字符串。因此，使用 onbeforeunload 事件和 returnValue 属性时需要特别注意兼容性问题。
  • 在现代浏览器中，使用 window.addEventListener() 方法来添加 beforeunload 事件，而不是直接设置 window.onbeforeunload 属性，可以提高兼容性。例如，使用以下代码可以实现与上面示例相同的功能：
window.addEventListener("beforeunload", function(event) {
    event.returnValue = "确认离开当前页面吗？";
});
参考链接