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 null undefined 空区别说明
Jun 13 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
jQuery基础知识小结
Dec 22 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
详解Django配置优化方法
2019/11/18 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
《郑和远航》教学反思
2014/04/16 职场文书
党校学习党性分析材料
2014/12/19 职场文书
司机岗位职责
2015/02/04 职场文书
实习生辞职信范文
2015/03/02 职场文书
新郎婚礼致辞
2015/07/27 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Golang: 内建容器的用法
2021/05/05 Golang