`
落地窗
  • 浏览: 437316 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

监听浏览器关闭按钮点击事件 -- 使用JS

阅读更多
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。

    Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统,涉及到防止用户半途退出考试(有意或者无意),代码如下:

<script type="text/javascript">   
<!--     
    window.onbeforeunload = onbeforeunload_handler;   
    window.onunload = onunload_handler;   
    function onbeforeunload_handler(){   
        var warning="确认退出?";           
        return warning;   
    }   
       
    function onunload_handler(){   
        var warning="谢谢光临";   
        alert(warning);   
    }   
// -->   
</script>   


这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.
通常应用在 注销session等等登陆信息 等方面.... 

通常应用在 注销session等等登陆信息 等方面....


运用onunload事件判断浏览器是刷新还是关闭窗口
 
function CloseOpen(event) {
if(event.client<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}


window.onbeforeunload = function() //author: meizz    
       {    
              var n = window.event.screenX - window.screenLeft;    
              var b = n > document.documentElement.scrollWidth-20;    
              if(b && window.event.clientY < 0 || window.event.altKey)    
              {    
                     alert("是关闭而非刷新");    
                     window.event.returnValue = ""; //这里可以放置你想做的操作代码    
              }    
       }  
分享到:
评论

相关推荐

    js实现监听浏览器关闭和刷新事件

    js实现监听浏览器关闭和刷新事件支持三大浏览器,点击直接看效果

    JS针对浏览器窗口关闭事件的监听方法集锦

    在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....

    js调用浏览器打印模块实现点击按钮触发自定义函数

    在JavaScript代码中,我们首先使用jQuery的点击事件监听功能,将自定义的打印函数绑定到按钮上。当按钮被点击时,printPDF函数就会被调用。该函数首先判断用户的浏览器是Internet Explorer还是其他现代浏览器(如...

    js监控IE火狐浏览器关闭、刷新、回退、前进事件.docx

    监听浏览器关闭事件主要通过`onbeforeunload`事件实现。此事件在浏览器窗口即将关闭时触发。需要注意的是,不同浏览器对此事件的支持程度和行为有所不同。 ```javascript window.onbeforeunload = function() { if...

    vue监听浏览器原生返回按钮,进行路由转跳操作

    综上所述,监听浏览器原生返回按钮,并根据应用的需要执行不同的路由操作,需要开发者合理使用`popstate`事件监听以及vue-router提供的导航守卫功能。这样做可以大幅提升用户的操作体验,确保页面间的数据一致性,...

    微信浏览器左上角返回按钮监听的实现

    即 公众号菜单-&gt;A-&gt;B-&gt;C,点击返回后,返回了B(且无刷新),目的是要在C直接跳转至A(公众号菜单-&gt;A-&gt;B-&gt;C,C-&gt;A),虽然可以在C上添加按钮之类的操作进行跳转(公众号菜单-&gt;A-&gt;B-&gt;C-&gt;A),但当点击左上角返回按钮后,...

    js监听鼠标点击和键盘点击事件并自动跳转页面

    本文将详细解释如何使用JavaScript监听鼠标的点击事件(onmousedown)和键盘的点击事件(onkeydown),并且在触发这些事件后,页面将会自动跳转到指定的URL。这一过程不复杂,适合初学者学习和参考。 首先,我们来...

    JS区分浏览器页面是刷新还是关闭

    然而,仅仅使用onbeforeunload事件并不能完全区分页面是刷新还是关闭,因为用户刷新页面时,也会触发该事件。 产品经理可能会提出更细致的需求,例如在页面关闭时和页面刷新时提供不同的提示信息,或者在页面刷新时...

    判断浏览器是刷新还是关闭窗口

    当用户通过点击浏览器的关闭按钮或通过其他方式(如刷新页面)离开当前页面时,此事件将被触发。由于其触发时机的特殊性,`onunload` 常被用来执行一些清理工作,如清除定时器、保存用户数据等。 **注意**:`...

    在vue中阻止浏览器后退的实例

    这段代码的主要作用是在用户点击浏览器的后退按钮时,通过监听`popstate`事件,使用`pushState`方法把当前页面的URL添加到历史记录中。这使得每次点击后退按钮时,浏览器都会重新导航到当前页面,从而达到阻止后退的...

    iOS微信浏览器回退不刷新实例(监听浏览器回退事件)

    为此,我们可以借助JavaScript的history对象来监听浏览器的回退事件,并相应地强制刷新页面或者执行其他自定义逻辑。 在这篇文章中,我们看到了如何使用pushState方法来监听浏览器的回退事件。pushState是HTML5提供...

    用html5 js实现点击一个按钮达到浏览器全屏效果

    HTML5全屏API允许网页或应用在不使用...通过上述知识点,开发者可以实现点击按钮控制浏览器全屏显示,同时对全屏模式下的事件进行监听和样式自定义。这些知识点为实现全屏效果的网页和应用提供了技术基础和实现方法。

    SWT开发的浏览器(Java)--源代码

    前进/后退按钮则可以使用`Button`控件,并添加相应的事件监听器来处理点击事件。 网页显示区域通常使用`Browser`控件,这是SWT专门为展示HTML内容设计的。`Browser`控件可以解析和渲染HTML,支持JavaScript执行,...

    javascript实现禁用浏览器后退按钮

    本文将详细介绍几种使用JavaScript来实现禁用浏览器后退按钮的方法及其原理。 #### 二、方法一:利用 `window.history.forward` 这种方法是最简单的一种方式,通过调用`window.history.forward()`方法来模拟一次...

    vue实现微信浏览器左上角返回按钮拦截功能

    主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    pdf.js使用demo(已解决隐藏打印下载等按钮)

    例如,通过监听 PDF.js 的事件,你可以实现自定义的进度条、书签功能,甚至与后端服务交互以实现动态加载 PDF 文档。 总的来说,PDF.js 提供了一个强大的 PDF 渲染引擎,通过对其组件和事件的深入理解和定制,我们...

    vuejs中监听窗口关闭和窗口刷新事件的方法

    这个事件在用户尝试离开当前页面时触发,无论是通过点击浏览器的刷新按钮、关闭窗口,还是导航到另一个URL。在这个事件的处理函数中,我们可以进行必要的操作,例如弹出提示框询问用户是否确定离开。 ```javascript...

    JS高仿QQ右下角弹窗有声音 兼容主流浏览器_2011-11-22[K8].rar

    描述中提到的“高仿腾讯右下角弹窗网页特效”,意味着这个JS实现不仅包含基本的弹窗功能,还复刻了腾讯QQ弹窗的一些特色效果,比如可能包括渐显渐隐的动画、可关闭按钮、自定义样式等。此外,它还强调了“兼容主流...

    全面考察“禁用浏览器后退按钮”

    此外,还可以利用JavaScript监听窗口的`popstate`事件,当用户试图通过后退操作改变URL时,触发相应的回调函数进行处理,比如阻止页面回退或重新加载内容。这种方法需要编写较为复杂的逻辑,并且可能受到浏览器兼容...

Global site tag (gtag.js) - Google Analytics