分享编程~
 
H5页面监听浏览器关闭、刷新、跳转时提示之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>


上一篇:JavaScript获取html中DOM节点Document对象下一篇:php变量给JavaScrip赋值0后if判断出现异常问题
赞(1) 踩(0)
赏金
微 信
赏金
支付宝
您说多少就多少,您的支持是我最大的动力