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 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 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中实现进程间通讯
2006/10/09 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
htm调用JS代码
2007/03/15 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
js模拟微博发布消息
2017/02/23 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python上下文管理器全实例详解
2019/11/12 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
办公室综合文员岗位职责范本
2014/02/13 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
情人节活动总结范文
2015/02/05 职场文书
员工工作表现自我评价
2015/03/06 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
python基础之类属性和实例属性
2021/10/24 Python