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 相关文章推荐
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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制作文本式留言板
2015/03/18 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
javascript json 新手入门文档
2009/12/03 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python 反向输出字符串的方法
2018/07/16 Python
python程序变成软件的实操方法
2019/06/24 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
会计职业生涯规划书
2014/01/13 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
四风对照检查材料范文
2014/09/27 职场文书
公证书格式
2015/01/23 职场文书
毕业生个人自荐书
2015/03/05 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers