Open wingmeng opened 5 years ago
在某些内容项较多的表单页面,为防止用户误操作离开页面导致输入内容丢失,一般会在该页面刷新、关闭或跳转时弹出一个确认提示框(如下图):
用户可以选择“取消”而继续留在当前页面。想要实现这个功能,需要用到 beforeunload 事件,它会在页面卸载前触发。
beforeunload
window.addEventListener('beforeunload', function(e) { var msg = '你真的要走啊?'; (e || window.event).returnValue = msg; // Gecko and Trident return msg; // Gecko and WebKit });
需要注意的是,除了 IE 外,Chrome 和 Firefox 浏览器都不会显示自定义的提示语(上面 msg 定义的文案),只要 returnValue 赋值为非空字符串,浏览器就会弹出一个对话框,如果没有赋值,该事件不作任何响应。
msg
returnValue
在某些内容项较多的表单页面,为防止用户误操作离开页面导致输入内容丢失,一般会在该页面刷新、关闭或跳转时弹出一个确认提示框(如下图):
用户可以选择“取消”而继续留在当前页面。想要实现这个功能,需要用到
beforeunload
事件,它会在页面卸载前触发。需要注意的是,除了 IE 外,Chrome 和 Firefox 浏览器都不会显示自定义的提示语(上面
msg
定义的文案),只要returnValue
赋值为非空字符串,浏览器就会弹出一个对话框,如果没有赋值,该事件不作任何响应。