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来关闭网页,如果是,则认为系统是关闭网页,否则在认为系统是刷新网页。

用js判断页面刷新或关闭的方法的更多相关文章

  1. js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

  2. js 检测页面刷新或关闭

    window.onbeforeunload=function(){ //要提交的内容 return "随意写";//必须有return ,不然只有ie有效,chrome无效 }

  3. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  4. js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  5. js判断页面在pc端打开还是移动端打开

    js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...

  6. JS判断页面是否出现滚动条

    今天无聊,帮一个网友解决一个很无聊的问题,用JS判断页面是否出现滚动条,在网上看了一些代码,经过验证并不起作用,下面是在网上搜索到的代码: 当可视区域小于页面的实际高度时,判定为出现滚动条,即: if ...

  7. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  8. js当前页面刷新并且清空文本内容的方法

    js当前页面刷新并且清空文本内容的方法: 1.js代码:location.reload(); 2.html:<body onload="document.forms[0].reset( ...

  9. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

随机推荐

  1. 再读C++线程池

    最近仔细看了一下https://github.com/henkel/threadpool代码,总体感觉非常精巧,使用了 boost库的bind function完成了线程池与业务端的完全解耦:所有的任 ...

  2. ref与out之间的区别

    ref和out都是C#中的关键字,所实现的功能也差不多,都是指定一个参数按照引用传递.对于编译后的程序而言,它们之间没有任何区别,也就是说它们只有语法区别. 总结起来,他们有如下语法区别: 1.ref ...

  3. logistc regression练习(三)

    % Exercise 4 -- Logistic Regression clear all; close all; clc x = load('E:\workstation\data\ex4x.dat ...

  4. Extjs中引入JSP页面

    有的时候,我们可能要在某个panel中动态的引入一个jsp页面.但是ext中貌似没有这样的方法,所以这时候需要我们自定义一个组件来完成我们的需求. 1.首先定义我们的penel. Ext.define ...

  5. 布局容器layout Container

    画布canvas 盒子Box VBox Hbox-->HGroup VGroup 控制条 ControlBar

  6. 关于JavaEE 开发中web.xml的主要配置及其使用

    web.xml 中的listener. filter.servlet 加载顺序及其详解 在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人 ...

  7. 总结:视频播放的四种实现方案(Native)

    一.来自 AVFoundation的 AVPlayer对象 特点: 1. AVPlayer     > 优点:          可以自定义UI, 进行控制     > 缺点:      ...

  8. 六大免费网站数据采集器对比(火车头,海纳,云采集,ET,三人行,狂人采集)

    2013年02月27日 PHP开源系统 暂无评论 阅读 497 views 次 在目前的站长圈内,比较流行的采集工具有很多,但是总结起来,比较出名的免费的就这么几个:火车头,海纳,云采集,ET,三人行 ...

  9. echo, print, print_r

    echo 不是函数,没有返回值,因此只是用作输出的话会更快 print 和 print_r 有返回值,区别在于: print 用于打印一个字符串,print_r 可以打印一些复合类型,如: $arr= ...

  10. Session Tracking Approaches

    cookies url rewriting hidden field see also: http://www.informit.com/articles/article.aspx?p=29817&a ...