js中onload与onunload的使用示例


Posted in Javascript onAugust 25, 2013

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

<script> 
window.onunload = function(){if(self.screenTop>9000)alert('该窗口已经被关闭!')} 
</script> 
或 
<script> 
window.onunload = function(){if(self.screenLeft>9000)alert(该窗口已经被关闭!.')} 
</script>

说明:
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';">
Javascript 相关文章推荐
Javascript Global对象
Aug 13 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 #Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 #Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 #Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 #Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 #Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 #Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 #Javascript
You might like
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP时间函数使用详解
2019/03/21 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python中字符串的修改及传参详解
2016/11/30 Python
理解python中生成器用法
2017/12/20 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python实现飞机大战项目
2020/03/11 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
django中cookiecutter的使用教程
2020/12/03 Python
销售行业个人求职自荐信
2013/09/25 职场文书
饭店工作计划书
2014/01/10 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
学校标语大全
2014/06/19 职场文书
征兵宣传标语
2014/06/20 职场文书
计划生育标语
2014/06/23 职场文书
红楼梦读书笔记
2015/06/25 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers