onbeforeunload与onunload事件
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而
onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而
Onbeforeunload 可以做到。
页面加载时只执行onload
页面关闭时先执行onbeforeunload,最后onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。
1、onbeforeunload事件:
说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法:
·object.onbeforeunload = handler
·<element onbeforeunload = “handler” …
></element>
描述:
事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
触发于:
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回,前进,刷新,主页其中一个的时候
·点击 一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候:click,document write,document open,document
close,window close ,window navigate ,window
NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
可以用在以下元素:
·BODY, FRAMESET, window
平台支持:
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
示例:
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<title>onbeforeunload测试</title>
<script>
function checkLeave(){
event.returnValue="确定离开当前页面吗?";
}
</script>
</head>
<body
onbeforeunload="checkLeave()">
</body>
</html>
2、onunload事件
用法:
·object.onbeforeunload = handler
·<element onbeforeunload =
"handler"></element>
描述:
当用户关闭一个页面时触发 onunload 事件。
触发于:
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回,前进,刷新,主页其中一个的时候
·点击 一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候:click,document write,document open,document
close,window close ,window navigate ,window
NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
示例:
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<title>onunload测试</title>
<script>
function checkLeave(){
alert("欢迎下次再来!");
}
</script>
</head>
<body
onunload="checkLeave()">
</body>
</html>
一个判断页面是否真的关闭和刷新的好方法(最好用)
window.onbeforeunload=function (){
alert("===onbeforeunload===");
if(event.clientX>document.body.clientWidth
&& event.clientY < 0
|| event.altKey){
alert("你关闭了浏览器");
}else{
alert("你正在刷新页面");
}
}
这段代码就是判断触发onbeforeunload事件时,鼠标是否点击了关闭按钮,或者按了ALT+F4来关闭网页,如果是,则认为系统是关闭网页,否则在认为系统是刷新网页。
分享到:
相关推荐
本文介绍了通过JavaScript判断浏览器是关闭还是刷新的方法。在Web开发过程中,有时候需要区分用户是关闭了浏览器窗口,还是仅仅刷新了页面,这对于执行某些特定的逻辑操作是很重要的。例如,当用户关闭浏览器窗口时...
代码实现时,需要在页面刷新或关闭时更新LocalStorage中保存的最后离开时间,确保下次判断时可以获取到正确的值。此外,页面卸载时应该执行登出电话系统等清理操作,无论页面是刷新还是关闭。 总之,区分页面刷新和...
在JavaScript编程中,判断页面是否是刷新或关闭是常见的需求,尤其在跟踪用户行为、保存数据或执行清理操作时。这个任务可以通过监听浏览器的特定事件来实现。在本篇文章中,我们将深入探讨如何通过JavaScript来识别...
在探讨“判断页面是关闭还是刷新的js代码”这一主题时,我们首先需要理解网页生命周期中的几个关键事件:`onload`、`onunload`、`onbeforeunload`以及`onclose`。这些事件在网页加载、卸载或刷新过程中扮演着重要...
Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是...
### 如何用JavaScript判断浏览器是刷新还是关闭 在Web开发中,有时候我们需要了解用户是通过刷新页面还是直接关闭浏览器来离开当前网页。虽然JavaScript本身并没有提供直接的方法来区分这两种行为,但可以通过监听...
通过上述方法,我们可以在一定程度上区分用户是刷新页面还是关闭窗口,从而更好地处理页面离开时的行为。然而,需要注意的是,这些方法都不是绝对可靠的,开发者还需要根据具体应用场景进行适当的调整和优化。
这个方法的原理是,当浏览器关闭时,event.clientX 和 event.clientY 属性的值将小于或等于 0,因此可以根据这个条件来判断浏览器是刷新还是关闭窗口。 方法二:使用 window.event.screenX 和 window.event.clientY...
虽然不能直接判断页面是刷新还是关闭,但结合`beforeunload`事件,可以提供更全面的页面状态监控。 ```javascript document.addEventListener('visibilitychange', function() { if (document.visibilityState =...
本文将详细介绍如何利用JavaScript来检测当前窗口是否被关闭或刷新。 #### 基本概念 1. **窗口(Window)**:在Web环境中,每个打开的浏览器窗口都可以视为一个`window`对象。 2. **选项卡(Tab)**:现代浏览器...
今天由于项目需要判断用户离开页面时要判断用户的行为是关闭还是刷新 虽然没有直接的方法,但通过一定的技巧也能做到 不得不感叹JavaScript的强大!! 请看一下代码: 代码如下: [removed] = function(){ var a...
### JS监控IE与火狐浏览器关闭、刷新、回退、前进事件 #### 一、引言 在Web应用开发过程中,有时需要对用户的浏览器行为进行监控,比如浏览器的关闭、刷新、前进或后退等操作。这对于提高用户体验、确保应用程序...
js实现监听浏览器关闭和刷新事件支持三大浏览器,点击直接看效果
页面刷新和关闭的判断可以使用JavaScript中的onbeforeunload和onunload事件来实现。在上面的代码中,我们使用了onbeforeunload和onunload事件来判断页面是否需要清除缓存。 知识点7: JavaScript中的事件 ...
在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....
例如,在需要防止重复提交的场景下,可以采用上述的防止页面刷新方法;而在需要保持页面数据最新性的场景下,则可以选择定时刷新页面。合理地结合这些方法,可以有效提升Web应用的质量和用户体验。 总之,无论是...