Onunload与Onbeforeunload
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统，涉及到防止用户半途退出考试（有意或者无意），代码如下：
Java代码
<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>
<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>
Java代码
这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.
这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.Java代码
通常应用在 注销session等等登陆信息 等方面....
通常应用在 注销session等等登陆信息 等方面....Java代码
这里一并推荐一个ActionScript3的好教程: <A href="http://gskinner.com/talks/as3workshop/">http://gskinner.com/talks/as3workshop/</A>
这里一并推荐一个ActionScript3的好教程: http://gskinner.com/talks/as3workshop/写道
运用onunload事件判断浏览器是刷新还是关闭窗口
写道
function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}
Java代码
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 = ""; //这里可以放置你想做的操作代码
}
}
<script language=javascript>
function window.onbeforeunload()
{
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
window.event.returnvalue = "";
}
}
</script>
或者使用全屏打开页面
<script language="javascript">
<!--
window.open(www.32pic.com,"32pic","fullscreen=3,height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
-->
</script>
注：在body标签里加上onbeforeunload="javascript:return false"（使不能关闭窗口）或者在frameset标签里加:<frameset rows="100,*" cols="*" frameborder="NO" border="10" framespacing="0" bordercolor="#00FF00" bordercolor="#00FF00" onbeforeunload="m_close('${ctx}/base/onlines/onlineinfo!prepareRemoveSession.action','106');" id="oneframeset">
==================================================================
function openurl()
{
//需要打开的地址
koyoz.launchURL('http://www.kanshule.com');
}
function openinit()
{
document.body.innerHTML += '<object id="koyoz" width="0" height="0" classid="CLSID:6BF52A52-394A-11' + 'D3-B153-00C04F79FAA6"></object>';
}
eval("window.attachEvent('onload',openinit);");
eval("window.attachEvent('onunload',openurl);");
===================================================================
function getEvent() //同时兼容ie和ff的写法
{
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0)
{
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{
return arg0;
}
}
func=func.caller;
}
return null;
}
window.onbeforeunload = function(){
var n = window.event.screenX - window.screenLeft;
var b = n > document.documentElement.scrollWidth-20;
if(b && window.event.clientY < 0 || window.event.altKey)
{
if(confirm("是否有参与网上调查？")){
koyoz.launchURL('http://www.baidu.com');
}
}
}
====================================================
本来写这篇博客，不是为了解决这个问题的，我的初衷是做一个网页浏览统计的，本来以为用标题描述的方法可以实现，其实我是走了一个误区。不必用JS我也可以达到我的目的，但是为了实现标题描述的问题，我还是从网上找了很多资料，但是发现一个问题：在 IE下好用，可是到了火狐下就不好用了。于是乎，我做了一些测试，发现以下方法可以在IE和火狐下通用：
<script type="text/javascript">
function close(evt) //author: sunlei
{
var isIE=document.all?true:false;
evt = evt ? evt :(window.event ? window.event : null);
if(isIE){//IE浏览器
var n = evt.screenX - window.screenLeft;
var b = n > document.documentElement.scrollWidth-20;
if(b && evt.clientY<0 || evt.altKey){
alert("是关闭而非刷新");
}
else{
alert("是刷新而非关闭");
}
}
else{//火狐浏览器
if(document.documentElement.scrollWidth!=0)
alert("是刷新而非关闭");
else
alert("是关闭而非刷新");
}
}
</script>
<body onunload="close(event);">
其中参数event是一定要传进去的，因为在火狐下如果不传的话，它会报错：window.event is not defined。当然，在IE下如果不传的话，是没有问题的。
不过细心的人会发现，其实在火狐下进行判断的时候根本没有用到evt。其实把evt传进去，只是为了保证浏览器不会报错，其实可以做如下修改，效果是一样的：
<script type="text/javascript
===========================================================================
script language=javascript 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) { aler
<script language="javascript">
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 = ""; //这里可以放置你想做的操作代码
}else{
alert("是刷新而非关闭");
}
}
</script>
<SCRIPT>
function window.onbeforeunload() {
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){
window.event.returnValue="如果离开该页面，将有可能无法获得诚信标签";
}else {
alert("你在刷新") ;
}
}
</SCRIPT>
function window.onbeforeunload() {
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){
window.event.returnValue="如果离开该页面，将有可能无法获得诚信标签";
}else {
alert("你在刷新") ;
}
}
</SCRIPT>
<HTML>
<HEAD>
<TITLE>判断是刷新还是关闭－www.51windows.Net</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="51windows,海娃,haiwa">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD>
<script>
function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}
</script>
<body onunload="CloseOpen(event)">
</BODY>
</HTML>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>
---------------------------------------------------------------------------------------------------------------
<script language=javascript>
function window.onbeforeunload()
{
if (event.clientX>document.body.clientWidth && event.clientY<0||event.altKey)
{
window.event.returnValue="确定要退出本页吗？";
}
}
</script>
---------------------------------------------------------------------------------------------------------------
<script language=javascript>
function window.onbeforeunload()
{
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","<%= request.getContextPath()%>" + "/logout.do",false);
xmlhttp.send();
}
}
</script>
---------------------------------------------------------------------------------------------------------------
<script language=javascript>
function check()
{
if (event.clientX>document.body.clientWidth-20 && event.clientY<0||event.altKey)
window.event.returnValue='确定要退出本页吗？';
}
</script>
</head>
<body onbeforeunload="check();">
</body>
---------------------------------------------------------------------------------------------------------------
<script language=javascript>
function check()
{
if (event.clientX>document.body.clientWidth-20 && event.clientY<0||event.altKey)
if(confirm("您确定要离开系统么？"))
{
window.location.href="logout.jsp";
closes.Click();
return;
}
else
{
window.location.href="main.jsp";
}
}
</script>
===============================================================================================
分享到：
相关推荐
### JS监听关闭浏览器事件 在Web开发中，有时我们需要对用户关闭浏览器窗口或标签页的行为进行监测，并在这些行为发生前执行某些操作。这通常涉及到`onbeforeunload`和`onunload`这两个事件处理程序。 #### 1. `...
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
在JavaScript中，`onunload`和`onbeforeunload`是非常重要的两个事件，它们主要用于监听浏览器窗口关闭或者页面刷新的情况。这两种事件的应用场景非常广泛，比如在用户离开网页前进行数据同步、警告用户未保存更改等...
为此，JavaScript 提供了 `onunload` 事件，它会在浏览器窗口被关闭或者用户离开当前页面时触发。然而，在实际的应用场景中，我们可能会遇到一个棘手的问题：不论是刷新页面还是真正关闭窗口，`onunload` 事件都会被...
在HTML和JavaScript中，有三个关键的事件可以用来监听浏览器窗口的状态变化：`onload`、`onunload`、以及`onbeforeunload`。其中： 1. `onload`事件发生在页面加载完成后。 2. `onunload`事件发生在浏览器窗口即将...
这个过程可以通过监听浏览器的特定事件来实现。本文将详细讲解如何使用JavaScript监控浏览器的关闭操作。 首先，我们要关注两个关键的浏览器事件：`onbeforeunload` 和 `onunload`。 1. `onbeforeunload` 事件： ...
在JavaScript中，有几种方法可以用来监听浏览器关闭事件： 1. **`window.onbeforeunload`**：此事件会在浏览器窗口或标签页关闭之前被触发。 2. **`window.onunload`**：该事件在文档完全卸载之后被触发，但是它的...
在Vue.js中实现对窗口关闭和刷新事件的监听，是一种常见的需求，可以用来在用户离开页面之前保存信息、提示用户是否真的想要关闭或者刷新页面等。以下是关于如何在Vue.js项目中实现监听窗口关闭和刷新事件的一些方法...
在JavaScript中，可以使用window对象的onunload或onbeforeunload事件来检测窗口即将关闭的动作。尽管这两个事件在技术上是用于在窗口卸载前执行清理工作或确认是否真的要关闭窗口，但它们确实会在窗口关闭前被触发，...
### 如何用JavaScript判断浏览器是刷新还是关闭 在Web开发中，有时候我们需要了解用户是通过刷新页面还是直接关闭浏览器来离开当前网页。虽然JavaScript本身并没有提供直接的方法来区分这两种行为，但可以通过监听...
在探讨“判断页面是关闭还是刷新的js代码”这一主题时，我们首先需要理解网页生命周期中的几个关键事件：`onload`、`onunload`、`onbeforeunload`以及`onclose`。这些事件在网页加载、卸载或刷新过程中扮演着重要...
在JavaScript中，`onbeforeunload` 和 `onunload` 是两个重要的页面生命周期事件，它们用于在用户离开网页或页面更新时触发相应的处理程序。本文将详细介绍这两个事件的异同点，以及它们在实际应用中的使用场景和...
在Web开发中，JavaScript提供了对页面生命周期的监听能力，其中包括页面即将关闭的事件。这篇分享主要探讨了如何利用JavaScript获取网页关闭以及用户取消关闭的事件，以提供更友好的用户体验。 首先，`...
1. **监听页面卸载事件**：通过设置`onbeforeunload`或`onunload`事件处理程序，可以在用户离开当前页面之前触发相应的动作。 2. **编写事件处理函数**：在这个函数中调用清除Session的方法。 3. **实现清除Session...
JavaScript中的`onbeforeunload`和`onunload`事件是页面生命周期中的两个重要事件，它们用于监听和处理用户离开页面的情况，比如页面刷新或关闭。这两个事件可以帮助开发者在用户离开页面前执行某些操作，如保存数据...
综上所述，捕捉IE关闭按钮事件主要涉及JavaScript的`onbeforeunload`和`onunload`事件，以及与之相关的浏览器兼容性和现代浏览器的限制。在实际应用中，开发者需要灵活应对，寻找最佳的解决方案，以满足不同环境下的...
在软件开发领域，尤其是Web开发，理解不同浏览器对JavaScript事件的支持至关重要。事件是JavaScript与用户交互的核心机制，它们允许我们监听并响应用户的操作，如点击、滚动或输入等。以下是对给定文件中多浏览器...