H5页面监听浏览器关闭、刷新、跳转时提示之onbeforeunload和onunload事件

在H5页面中一些场景情况下防止表单数据丢失或者防止用户意外跳走页面，通过js进行监听提示用户，通过onbeforeunload事件和onunload事件实现。

onbeforeunload和onunload都是在刷新或关闭时调用，区别在于onunload在onbeforeunload之后执行，onbeforeunload可以阻止onunload的执行。

onbeforeunload服务器还没有还没开始读取新页面时调用，onunload是服务器已经读取到了新页面的内容调用。

注意onbeforeunload可以阻止新页的内容更新而onunload是无法阻止新页面的内容更新的。还有a标签上有target="_blank" 则不会触发，因为当前页面没有关闭或者更接。

监听h5页面关闭、刷新、跳转以下代码直接放到h5页面head标签中即可：

<script>
window.onbeforeunload=function(e){     
　　var e = window.event||e;  
　　e.returnValue = "";
}
</script>

当然以上代码还可以放到自定义方法中控制是否需要加载。

e.returnValue = "这里可写自定义弹层内容";现版本已经不再支持自定义的内容了。

如果页面是表单页面，进行提交时跳转到新页面，这时不想再监听和提示，就在方法里边代码去掉即可，如：

<script>
window.onbeforeunload=function(e){     
　　
}
</script>

同过以上示例简单写个例子，功能是当前正在填写表单时要跳转新页面或者刷新、关闭浏览器时就会提示，点击提交按钮后跳转到新页面就不再提示了。

如下代码：

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <title>监听h5页面关闭、刷新、跳转时弹出提示-越加网</title> 
    <script>
		function closeLeave(){
			window.onbeforeunload=function(e){     
			　　var e = window.event||e;  
			　　e.returnValue = "";
			}
		}
		closeLeave();
　　</script>
 </head> 
<body>
	更多内容请点击：
	<a href="http://www.yj521.com/">越加网</a>（点击会提示你离开）
	<br>
	<div>帐号：<input type="text" name="uname"></div>
	<div>密码：<input type="password" name="pwd"></div>
	<div><input type="button" id="sub_btn" value="提交"></div>
 </body>
 <script>
	var test1 = document.getElementById("sub_btn");
    test1.onclick = function(){
        window.onbeforeunload=function(e){     
		
		}
		// 其他业务逻辑
		alert('保存成功，现在开始跳转到新页面不会提示离开');
		window.location.href="http://www.yj521.com/";
    };
 </script>
</html>