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 相关文章推荐
关于js datetime的那点事
Nov 15 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
javascript实现密码强度显示
Mar 18 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
JavaScript闭包的简单应用
2017/09/01 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
layui表格数据重载
2019/07/27 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
python 数据加密代码
2008/12/24 Python
python读取csv文件示例(python操作csv)
2014/03/11 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python中字符串的编码与解码详析
2020/12/03 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
怎样自定义一个异常类
2016/09/27 面试题
英语系本科生个人求职信
2013/09/21 职场文书
学生请假条格式
2014/04/11 职场文书
学习演讲稿范文
2014/05/10 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
鲁迅故居导游词
2015/02/05 职场文书
mysql知识点整理
2021/04/05 MySQL
PyTorch中permute的使用方法
2022/04/26 Python