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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
js右键菜单效果代码
Jul 21 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
js实现简单的贪吃蛇游戏
Apr 23 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守护进程(Daemon)
2015/12/30 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
js中this对象用法分析
2018/01/05 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
python分析作业提交情况
2017/11/22 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python pandas 时间日期的处理实现
2019/07/30 Python
学python安装的软件总结
2019/10/12 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
.net面试题
2015/12/22 面试题
残疾人小组计划书
2014/04/27 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python