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之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
ES5新增数组的实现方法
May 12 Javascript
vue和小程序项目中使用iconfont的方法
May 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调用mysql存储过程
2007/02/14 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
linux面试题参考答案(7)
2014/07/24 面试题
四年的个人工作自我评价
2013/12/10 职场文书
个人函授自我鉴定
2014/03/25 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
python中print格式化输出的问题
2021/04/16 Python
使用Django实现商城验证码模块的方法
2021/06/01 Python