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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
AngularJS内置指令
Feb 04 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue按需加载实例详解
Sep 06 Javascript
JavaScript实现轮播图效果
Oct 30 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jQuery代码优化 事件委托篇
2011/11/01 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
python format 格式化输出方法
2018/07/16 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
配件采购员岗位职责
2013/12/03 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
给校长的建议书
2014/03/12 职场文书
目标责任书范文
2014/04/14 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
2014年城管工作总结
2014/11/20 职场文书
车间统计员岗位职责
2015/04/14 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang