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使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
微信小程序 navbar实例详解
May 11 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
解决removeEventListener 无法清除监听的问题
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针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
对javascript继承的理解
2016/10/11 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
JS随机密码生成算法
2019/09/23 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
python3 简单实现组合设计模式
2020/07/02 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
制定岗位职责的原则
2013/11/08 职场文书
大一期末自我鉴定
2013/12/13 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
环保证明
2015/06/23 职场文书