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中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
react 路由Link配置详解
Nov 11 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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循环获取GET和POST值的代码
2008/04/09 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
公司年会抽奖活动主持词
2014/03/31 职场文书
食品安全工作方案
2014/05/07 职场文书
节能环保标语
2014/06/12 职场文书
法人委托书
2014/07/31 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python