前言:
onbeforeunload事件可以用在页面刷新前,页面关闭前,进行提示判断等相关操作。也就是说你再这个事件里面添加的操作,你点击f5刷新或者退出这个页面都会触发。
效果图:
js和vue中通过案例来说明用法:
一、js中使用方法:
<html>
<head>
<title>this is id onbeforunload event test</title>
</head>
<script type="text/javascript" language="javascript">
var goodexit=false;
function bindunbeforunload(){
goodexit=false;
window.onbeforeunload=perforresult;
}
function unbindunbeforunload(){
goodexit=true;
window.onbeforeunload=null;
}
function perforresult(){
if(!goodexit){
return"当前操作未保存,如果你此时离开,所做操作信息将全部丢失,是否离开?";
}
}
</script>
<body onload="javascript:return bindunbeforunload();">
<h1>test is start</h1>
<input type="button" value="绑定事件" id="btnBind" onclick="return bindunbeforunload();"/>
<input type="button" value="删除绑定事件" id="btnUnBind" onclick="unbindunbeforunload();"/>
</body>
</html>
二:vue中使用:
1、在路由跳转之前来添加事件
mounted () {
window.onbeforeunload = function (e) {
return ''
}
},
beforeRouteLeave (to, from, next) {
if (this.progressVisible) {
this.$confirm('系统可能不会保存您所做的更改。', '离开此页面?', {
confirmButtonText: '离开',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
next()
})
} else {
next()
}
},
beforeDestory () {
window.onbeforeunload = null
}
2、直接使用,但是必须有return值
mouted(){
window.onbeforeunload = () =>{
this.clearViews();
return 'tips';
}
},
methods:{
clearViews(){
alert(1);
}
}