js中onload与onunload的使用示例_javascript技巧

引言:
今天周末没事,就想起前面自己做的一个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';">

时间: 2024-10-07 01:34:25

js中onload与onunload的使用示例_javascript技巧的相关文章

js中关于一个分号的崩溃示例_javascript技巧

复制代码 代码如下: if ($("span", $("#txtStere").siblings("div")).text() === "*"); { if (!IsNum("#txtStere")) { $("#txtStere").next().text("您选择的运费模板是按体积计价,物流体积不能为空且需是数字"); return false; } else {

js中精确计算加法和减法示例_javascript技巧

/精确计算加法和减法.例如0.1+0.2=0.3或 0.1-0.2=-0.1 复制代码 代码如下: function addFn(dataOne,dataTwo){ var dataOneInt=dataOne.toString().split(".")[0]; var dataOneFloat=""; var dataTwoInt=dataTwo.toString().split(".")[0]; var dataTwoFloat="

Vue.js中数组变动的检测详解_javascript技巧

前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()_javascript技巧

首先了解枚举属性 一般利用for~in遍历 var a = [1,2,3]; for(var i in a){ console.log(a[i]); } or var o = {p1:1,p2:2}; for(var i in o){ console.log(i+'='+o[i]); }//p1=1;p2=2; <1>并不是所有的属性都会在for~in遍历中显示.比如(数组的)length属性和constructor属性.那些已经被显示的属性被称为可枚举的,可以通过各个对象所提供的proper

js中style.display=&quot;&quot;无效的解决方法_javascript技巧

本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码 代码如下: <style>  #name  {      display:none;  } </style> </head> <body> &l

js中的如何定位固定层的位置_javascript技巧

需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0:如果不要此标签则一切正常,那么在xhtml中如何获取body的坐标呢?当然有办法了,我们使用document.documentElement来取代document.body例如可以这样写: 复制代码 代码如下: var top=document.documentEl

JS中位置与大小的获取方法_javascript技巧

scrollHeight,clientHeight,offsetHeight的区别 说明: scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大. clientHeight:DOM元素内容可视区的高度,不包含滚动条和边框的高度. offsetHeight:DOM元素整体的高度,包括滚动条和边框. 当滚动条不出现的时候 这时候DOM元素中没有内容或者内容不超过可视区 scrollWidth=clientWidth,两者皆为可

js中利用cookie实现记住密码功能_javascript技巧

在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo

js中的preventDefault与stopPropagation详解_javascript技巧

首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情.看一段代码大家就