`

Javascript监听浏览器tab关闭

阅读更多
Javascipt监听浏览器tab关闭:

IE

支持得相对好一点:监听鼠标点击关闭按钮或者按Ctrl+F4组合键,在onunload处理函数中,浏览器可以发送请求到服务器,让服务器做相关的处理。


Safari, Firefox

能够在onunload处理函数中正确判断,但此时浏览器无法向服务器发送请求。
如果我们使用onbeforeunload处理函数,此时浏览器可以向服务器发送请求,但无法判断浏览器是刷新,转到别的页面还是关闭。

window.onunload = function unLoad( e ) {
    if (window.event) { // IE browser, could work
        e = window.event;
        if (e.clientY < 0 || e.ctrlKey) { // Handle two scenarios: click the x button of the tab or press Ctrl + F4
            logout();
        }
    } else if (window.event) { // Safari
        if (document.documentElement.scrollWidth == 0) {
            logout(); // Couldn't send the request to the server when unload event occurred in Safari
        }        
    } else { // Firefox, could listen to the event, but couldn’t send the logout() request to server
        if (document.documentElement.scrollWidth == 0) { // Alternatively, if we choose the window.onbeforeunload event, which could be triggered by refreshing the window or navigating to another page or closing the tab. This condition would never happen despite we could send the logout() request to server
            logout();
        } 
    }
}
分享到:
评论
1 楼 Mybeautiful 2013-09-11  
从逻辑看,似乎这个if不可能进去,

    } else if (window.event) { // Safari 

相关推荐

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

    本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) [removed] [removed]=onclose; function ...

    wpf+CefSharp模仿浏览器Tab分页,下载文件,收藏,刷新,删除,新窗口

    通过在代码中动态添加和移除TabItem,可以实现添加新Tab或关闭已有Tab的功能。 4. **文件下载管理** CefSharp提供了DownloadHandler接口,你可以实现这个接口来处理文件下载事件。通过监听DownloadItem的回调,...

    类似浏览器tab标签选项卡代码.zip

    在IT领域,尤其是在网页开发中,"类似浏览器tab标签选项卡代码"是一个常见的需求,它模仿了浏览器中标签页的功能,允许用户在一个页面上切换不同的内容区域,而无需加载新的页面。这种设计模式极大地提高了用户体验...

    网页tab控件 支持多浏览器

    在这个名为"网页tab控件 支持多浏览器"的项目中,开发者已经实现了对两种主流浏览器——Internet Explorer(IE)和Firefox的支持,这意味着这个控件具有良好的跨浏览器兼容性。 在实际的网页开发中,Tab控件通常由...

    javascript 经典tab控件

    在本主题中,我们关注的是"javascript 经典tab控件",这是一种常见的网页组件,用于组织和展示多块内容,让用户能够通过点击不同的标签来切换显示的内容。这种控件在许多网站和应用程序中都有应用,如设置页面、产品...

    基于JavaScript实现通用tab选项卡(通用性强)

    通过`EventUtil`的`addHandler`方法绑定事件监听器,可以确保Tab切换功能在不同的浏览器上都能正常工作。 4. 代码封装与复用: 在示例中,Tab选项卡的实现具有较高的通用性,意味着相同的代码能够在不同的页面或...

    Tab浏览器(c#)

    【标题】:“Tab浏览器(c#)” 【描述】:“选项卡式浏览器”是一种用户界面设计,它允许用户在一个单一的窗口中同时打开多个网页,每个网页在一个单独的选项卡中显示,类似于许多现代网络浏览器的功能。这个项目...

    bootstrap-closable-tab tab可关闭组件

    例如,它如何添加事件监听器,如何构建DOM元素,以及如何在Tab关闭时清理相关资源。 在`bootstrap-closable-tab-master`这个压缩包中,你可能会找到以下文件: - `js` 文件夹:包含实现这个功能的JavaScript代码,...

    chrome插件开发 - tab页面切换插件

    总的来说,开发“chrome插件 - tab页面切换插件”涉及到Chrome插件的基础知识,包括manifest.json配置、JavaScript脚本编写、事件监听、用户界面设计和性能优化。通过掌握这些技能,开发者能为用户提供更加便捷和...

    ionic应用-tab应用+返回键监听

    标题中的“ionic应用-tab应用+返回键监听”指的是使用Ionic框架构建的一款应用,该应用采用了Tab导航模式,并且集成了返回键监听功能。Ionic是一款基于AngularJS和Apache Cordova的移动应用开发框架,它允许开发者...

    JavaScript相册Tab选项卡切换

    JavaScript是一种轻量级的解释型编程语言,主要应用于Web浏览器,用于实现客户端的动态效果和交互。在我们的案例中,JavaScript将负责处理用户点击Tab选项卡时的事件,以及切换显示相应的相册内容。 1. **HTML结构*...

    类似网易的javascript+css做的Tab控件

    此外,为了实现平滑的用户界面,还可以添加事件监听器来确保只有单个Tab处于活动状态。 在实现过程中,需要注意兼容性和性能优化。对于老旧浏览器,可能需要使用jQuery等库来支持旧版的DOM操作。另外,避免使用过于...

    JavaScript实现的HashTabber垂直tab切换效果代码

    在前端开发中,JavaScript常用于实现各种用户界面效果,例如本例中的"HashTabber"垂直tab切换效果。这个效果使得用户可以通过点击不同的tab选项在不同的内容区域之间进行切换,而页面无需刷新。 在JavaScript实现的...

    bootstrap-tab页带右键关闭

    这个功能允许用户通过右键点击Tab页来执行特定操作,如关闭当前Tab、关闭其他Tab或关闭所有Tab,同时也支持根据自定义JSON配置来定制右键菜单。接下来,我们将深入探讨这一主题。 首先,Bootstrap是一个流行的前端...

    JavaScript实现的带左右箭头的tab标签代码,tab里面可以放html代码,不限于文字

    在这个特定的项目中,我们讨论的是使用JavaScript实现的带左右箭头的tab标签功能,这使得用户可以通过点击箭头来切换不同的标签页,而且每个标签页内不仅限于显示文字,还可以包含HTML代码,提供更丰富的展示内容。...

    javascript_menu_tab的例子

    8. **兼容性处理**:为了确保在各种浏览器中都能正常工作,可能需要使用像jQuery这样的库来处理跨浏览器的差异,或者使用现代JavaScript语法并借助工具进行转换。 总的来说,“javascript_menu_tab”的例子是一个...

    JavaScript tab标签 自适应宽度的标签导航

    在前端开发中,JavaScript Tab标签是一种常见的用户界面元素,它用于组织和展示多部分内容,而自适应宽度的标签导航则是为了确保在不同设备和屏幕尺寸下都能提供良好的用户体验。本篇将深入探讨如何使用JavaScript...

    bootstrap-closable-tab.js tab标签页扩展之关闭全部和关闭其他

    4. **事件监听与处理**:为了实现这些功能,`bootstrap-closable-tab.js`会监听用户的交互事件,比如点击关闭按钮,然后触发相应的处理函数来执行关闭操作。同时,它还会确保关闭操作符合预期,比如防止误操作导致...

    支持移动浏览器(手机、ipad等)左右滑动切换tab标签

    3. **JavaScript/jQuery**:使用JavaScript或者jQuery来处理触摸事件,监听`touchstart`、`touchmove`和`touchend`。在`touchstart`事件中记录初始触摸位置,在`touchmove`事件中计算滑动距离,并判断是否达到切换...

    javascript tab标签 韩国购物网Flash标签切换效

    JavaScript是一种广泛应用于网页和应用程序开发的脚本语言,它基于ECMAScript标准,在浏览器环境中运行,为用户提供动态交互体验。在网页设计中,tab标签页切换效果是常见的一种交互元素,用于组织和展示大量信息。...

Global site tag (gtag.js) - Google Analytics