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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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常用的安全过滤函数集锦
2014/10/09 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
应聘教师自荐信
2013/10/12 职场文书
业务主管岗位职责
2013/11/20 职场文书
客户经理岗位职责
2013/12/08 职场文书
创业资金计划书
2014/02/06 职场文书
中学生自我评价范文
2014/02/08 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
考研英语复习计划
2015/01/19 职场文书
社区活动总结
2015/02/04 职场文书