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 相关文章推荐
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
Openlayers实现距离面积测量
Sep 28 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP中list方法用法示例
2016/12/01 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
详解vue-cli官方脚手架配置
2018/07/20 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python简单实现enum功能的方法
2016/04/25 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
新课培训心得体会
2014/09/03 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
小学生毕业评语
2014/12/26 职场文书
大学开学感言
2015/08/01 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
python实现双向链表原理
2022/05/25 Python
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript