js 浏览器窗口 刷新、关闭事件

摘要:
当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。

1、beforeunload

当浏览器窗口关闭或者刷新时,会触发beforeunload事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。

2、onbeforeunload

当窗口即将被卸载(关闭)时,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被取消。

各大浏览器测试结果:

火狐浏览器
刷新时:先执行 onbeforeunload ,新页面即将替换旧页面时 onunload ,最后 onload ;
关闭时:只执行 onbeforeunload

谷歌浏览器
刷新时:先执行 onbeforeunload ,新页面即将替换旧页面时 onunload ,最后 onload ;
关闭时:先执行 onbeforeunload ,再执行 onunload.
小窗口关闭:先执行 onbeforeunload ,onunload

MicsoftEdge浏览器
刷新时:先执行 onbeforeunload ,新页面即将替换旧页面时 onunload ,最后 onload ;
关闭时:只执行 onbeforeunload

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362

IE浏览器
刷新时:先执行 onbeforeunload ,新页面即将替换旧页面时 onunload ,最后 onload ;
关闭时:只执行 onbeforeunload

360浏览器
刷新时:先执行 onbeforeunload ,再执行 onload ;
关闭时:只执行 onbeforeunload

js 浏览器窗口 刷新、关闭事件第1张js 浏览器窗口 刷新、关闭事件第2张
window.onload = function(){
    console.log('unload操作===========================unload操作');
    var userAgent =navigator.userAgent;
    var flag = userAgent.indexOf('Firefox') > -1 ? true : false;
    window.onunload = function() {
        console.log('ooooooooooooooooo操作');
        if(!flag){
            console.log('ooooooooooooooooo操作');
        }else{

        }
    };

    window.onbeforeunload = function() {
        console.log('bbbbbbbbbbbbbbbbb操作');
        if(flag){
            console.log('bbbbbbbbbbbbbbbbb操作');
        }else{
            
        }
    };
}
View Code

免责声明:文章转载自《js 浏览器窗口 刷新、关闭事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Swift开发中 JSON对象/JSON字符串/Data的互转[转]从minio中读取文件流进行下载文件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS实现控制HTML5背景音乐播放暂停

首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover.qiniudn.com/jquery.js"></script> <a class="mscBtn" id="audioBtn" title='最幸福的人' style="cursor:pointer;"></a&...

js scroll动画

知识点 1、window.scrollTo (x,y):可以把内容滚动到指定位置  scroll  scroll:卷动意思(书卷)  从上到下移动   1、window.onscroll 窗口滚动事件(必须有滚动条才可以触发) body{height: 5000px;} window.onscroll=function () {...

Nginx 安装及配置、负载均衡https网站及转发后页面js、css等路径找不到问题、更换证书导致问题解决

官网下载nginx:http://nginx.org/en/download.html 安装nginx编译环境:yum install -y gcc-c++ 安装pcre库解析正则:yum install -y pcre pcre-devel 安装zlib库用于压缩解压缩:yum install -y zlib zlib-devel 安装openssl库...

JS 获取网页内容高度 和 网页可视高度 支持IE 6789 Firefox Chrome 【转】

function getClientHeight() { //可见高 var clientHeight=document.body.clientHeight;//其它浏览器默认值 if(navigator.userAgent.indexOf("MSIE 6.0")!=-1) { clientHeight=do...

js FileReader 读取文件

前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件。 input:file 在介绍FileReader之前,先简单介绍input的file类型。 <input type="file" id="inputBox"> input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口,文字...

JS代码收藏大全

从其他地方找来的,希望对有需要的人带来方便! 1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body o...