编辑页面离开时弹出提示
本文由 小茗同学 发表于 2017-08-22 浏览(7976)
最后修改 2019-07-18 标签：javascript unload

正文

N年前就知道，只是没记录过，所以今天写下来。主要是借助window.onbeforeunload来实现：

JS写法：

window.onbeforeunload = function()
{
	return '修改尚未保存，确定放弃吗？';
};

//或者这样写：
window.onbeforeunload = function(event)
{
	event.returnValue = '修改尚未保存，确定丢弃吗？';
};

如果用户保存了，就window.onbeforeunload = null;即可。

需要特别注意，如果你是用addEventListener来添加事件，那么采用上面第一种方法直接return一个字符串是不生效的，必须采用第二种event.returnValue方法：

// 生效
window.addEventListener('beforeunload', function(e) {
	e.returnValue = '确认要离开吗？';
});
// 不生效
window.addEventListener('beforeunload', function(e) {
	return '确认要离开吗？';
});

HTML写法：

<body onbeforeunload="return '修改尚未保存，确定丢弃吗？'">

</body>

效果（不同浏览器略有不同）：

部分浏览器可能不会显示你返回的字符串，而只显示默认提示（如Mac下的Chrome）：