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事件写法实现代码
Jan 07 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
Vue实现简单的留言板
Oct 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
19个超实用的PHP代码片段
2014/03/14 PHP
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
python解析json实例方法
2013/11/19 Python
python解析中国天气网的天气数据
2014/03/21 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
用python实现的线程池实例代码
2018/01/06 Python
Python装饰器用法示例小结
2018/02/11 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
中文教师求职信
2014/02/22 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
网吧消防安全责任书
2014/07/29 职场文书
教师考核评语大全
2014/12/31 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
关于召开会议的通知
2015/04/15 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python