如何运用onunload事件判断浏览器是刷新还是关闭窗口

最新推荐文章于 2024-07-16 10:40:17 发布

yjboy1982

最新推荐文章于 2024-07-16 10:40:17 发布

阅读量9.1k

点赞数 1

分类专栏： JS 文章标签：浏览器 session javascript function 数据库电子商务

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当浏览器退出时会触发 onunload事件 ，因此我们可以使用onunload事件做一些在页面关闭时要执行的操作，如提示用户信息等。但或许在实际应用中我们都发现一个问题，刷新浏览器同样会触发onunload事件，也就是只要是离开该页面就会触发onunload事件，或许刷新时我们并不想执行onunload定义的操作，或者我们只想在刷新时执行某操作，这样我们就遇到了一些麻烦。
下面就把找到的两段代码共享出来，希望对正好需要解决此问题朋友有所帮助。

方法一：

<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 οnunlοad="CloseOpen(event)">
       </BODY>
</HTML>

第二种做法：

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

引言：今天周末没事，就想起前面自己做的一个B2C的电子商务平台，还有些一些地方没有完善，就想着完善，嗯，问题是这样的，在电子商务平台中有这样一个场景，我将购物车放置在Session中，使其在整个购物的过程中都能从Session中得到购物车模型，我在购物车某型中有的商品都会在数据库中减少其购物车中购买的数量，但是如果我关闭窗口，怎样让Session中的购物车模型中的商品数量添加到数据库中，于是我查找了GOOGLE、百度，得到的第一个提示，就是：关闭窗口自动清除Session，于是找到的第一个方法就是在<body>标签使用onunload属性，调用某个js如：<body onunload=”close()”>该方法是关闭窗口时触发close()事件，于是我就可以在close()方法中定义删除Session的方法……

但是事实不是这样的，当你刷新这个页面，以及点击这个页面上的链接时onunload都会触发，于是我又在GOOGLE，百度中查找：得到的答案如下：

说明：

window.screenTop

获取浏览器客户区左上角相对于屏幕左上角的 y 坐标

screenTop>后面的数字必须大于你显示分辩率中的高度

比如，800*600, 这个数得大于600

window.screenLeft

获取浏览器客户区左上角相对于屏幕左上角的 x 坐标

screenLeft>后面的数字必须大于你显示分辩率中的宽度

比如，800*600, 这个数得大于800

通常这两个值设为9000

于是我使用上面的方法，实现了只有在关闭页面才触发onunload事件。

总结：

① 当使用onunload属性时，你可以使用Ajax来清除Session，也可以使用window.location.href来触发某个请求，比如我在这个用的是struts2我可以用<body onunload=”javascript:window.location.href-‘${pageContext.request.contextPath }/cart/closeWindow.action’” >

然后有closeWindow.action这个请求去处理Session中购物车的商品，让其数量添加到数据库中；

② 在此处我也有Ajax来处理请求，但是事实上我们只要处理Session，并不要处理完Session后有任何返回的异步信息，所以我还是使用的触发一个请求的方法，最终的写法如下：

<body

onunload="javascript:if(self.screenTop>9000) window.location.href='${pageContext.request.contextPath }/cart/closeWindow.action';">

遗留问题，一般Session会在系统为访问上30分钟后消失，也就是Session失效，但是这样并没有将商品库存更新，这个问题还有待解决，嗯不早了希望明天解决。