编辑页面离开时弹出提示
本文由 小茗同学 发表于 2017-08-22 浏览(1615)
最后修改 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):