js中onload與onunload的使用示例
更新時(shí)間:2013年08月25日 12:33:14 作者:
onload與onunload想必大家并不陌生吧,下面為大家演示下js中onload與onunload的妙用,感興趣的朋友可以參考下,希望對(duì)大家有所幫助
引言:
今天周末沒(méi)事,就想起前面自己做的一個(gè)B2C的電子商務(wù)平臺(tái),還有些一些地方?jīng)]有完善,就想著完善,嗯,問(wèn)題是這樣的,在電子商務(wù)平臺(tái)中有這樣一個(gè)場(chǎng)景,我將購(gòu)物車(chē)放置在Session中,使其在整個(gè)購(gòu)物的過(guò)程中都能從Session中得到購(gòu)物車(chē)模型,我在購(gòu)物車(chē)某型中有的商品都會(huì)在數(shù)據(jù)庫(kù)中減少其購(gòu)物車(chē)中購(gòu)買(mǎi)的數(shù)量,但是如果我關(guān)閉窗口,怎樣讓Session中的購(gòu)物車(chē)模型中的商品數(shù)量添加到數(shù)據(jù)庫(kù)中,于是我查找了GOOGLE、百度,得到的第一個(gè)提示,就是:關(guān)閉窗口自動(dòng)清除Session,于是找到的第一個(gè)方法就是在<body>標(biāo)簽使用onunload屬性,調(diào)用某個(gè)js如:<body onunload=”close()”>該方法是關(guān)閉窗口時(shí)觸發(fā)close()事件,于是我就可以在close()方法中定義刪除Session的方法……
但是事實(shí)不是這樣的,當(dāng)你刷新這個(gè)頁(yè)面,以及點(diǎn)擊這個(gè)頁(yè)面上的鏈接時(shí)onunload都會(huì)觸發(fā),于是我又在GOOGLE,百度中查找:得到的答案如下:
<script>
window.onunload = function(){if(self.screenTop>9000)alert('該窗口已經(jīng)被關(guān)閉!')}
</script>
或
<script>
window.onunload = function(){if(self.screenLeft>9000)alert(該窗口已經(jīng)被關(guān)閉!.')}
</script>
說(shuō)明:
window.screenTop
獲取瀏覽器客戶(hù)區(qū)左上角相對(duì)于屏幕左上角的 y 坐標(biāo)
screenTop>后面的數(shù)字必須大于你顯示分辯率中的高度
比如,800*600, 這個(gè)數(shù)得大于600
window.screenLeft
獲取瀏覽器客戶(hù)區(qū)左上角相對(duì)于屏幕左上角的 x 坐標(biāo)
screenLeft>后面的數(shù)字必須大于你顯示分辯率中的寬度
比如,800*600, 這個(gè)數(shù)得大于800
通常這兩個(gè)值設(shè)為9000
于是我使用上面的方法,實(shí)現(xiàn)了只有在關(guān)閉頁(yè)面才觸發(fā)onunload事件。
總結(jié):
① 當(dāng)使用onunload屬性時(shí),你可以使用Ajax來(lái)清除Session,也可以使用window.location.href來(lái)觸發(fā)某個(gè)請(qǐng)求,比如我在這個(gè)用的是struts2我可以用<body onunload=”javascript:window.location.href-‘${pageContext.request.contextPath }/cart/closeWindow.action'” >
然后有closeWindow.action這個(gè)請(qǐng)求去處理Session中購(gòu)物車(chē)的商品,讓其數(shù)量添加到數(shù)據(jù)庫(kù)中;
② 在此處我也有Ajax來(lái)處理請(qǐng)求,但是事實(shí)上我們只要處理Session,并不要處理完Session后有任何返回的異步信息,所以我還是使用的觸發(fā)一個(gè)請(qǐng)求的方法,最終的寫(xiě)法如下:
<body
onunload="javascript:if(self.screenTop>9000) window.location.href='${pageContext.request.contextPath }/cart/closeWindow.action';">
今天周末沒(méi)事,就想起前面自己做的一個(gè)B2C的電子商務(wù)平臺(tái),還有些一些地方?jīng)]有完善,就想著完善,嗯,問(wèn)題是這樣的,在電子商務(wù)平臺(tái)中有這樣一個(gè)場(chǎng)景,我將購(gòu)物車(chē)放置在Session中,使其在整個(gè)購(gòu)物的過(guò)程中都能從Session中得到購(gòu)物車(chē)模型,我在購(gòu)物車(chē)某型中有的商品都會(huì)在數(shù)據(jù)庫(kù)中減少其購(gòu)物車(chē)中購(gòu)買(mǎi)的數(shù)量,但是如果我關(guān)閉窗口,怎樣讓Session中的購(gòu)物車(chē)模型中的商品數(shù)量添加到數(shù)據(jù)庫(kù)中,于是我查找了GOOGLE、百度,得到的第一個(gè)提示,就是:關(guān)閉窗口自動(dòng)清除Session,于是找到的第一個(gè)方法就是在<body>標(biāo)簽使用onunload屬性,調(diào)用某個(gè)js如:<body onunload=”close()”>該方法是關(guān)閉窗口時(shí)觸發(fā)close()事件,于是我就可以在close()方法中定義刪除Session的方法……
但是事實(shí)不是這樣的,當(dāng)你刷新這個(gè)頁(yè)面,以及點(diǎn)擊這個(gè)頁(yè)面上的鏈接時(shí)onunload都會(huì)觸發(fā),于是我又在GOOGLE,百度中查找:得到的答案如下:
復(fù)制代碼 代碼如下:
<script>
window.onunload = function(){if(self.screenTop>9000)alert('該窗口已經(jīng)被關(guān)閉!')}
</script>
或
<script>
window.onunload = function(){if(self.screenLeft>9000)alert(該窗口已經(jīng)被關(guān)閉!.')}
</script>
說(shuō)明:
window.screenTop
獲取瀏覽器客戶(hù)區(qū)左上角相對(duì)于屏幕左上角的 y 坐標(biāo)
screenTop>后面的數(shù)字必須大于你顯示分辯率中的高度
比如,800*600, 這個(gè)數(shù)得大于600
window.screenLeft
獲取瀏覽器客戶(hù)區(qū)左上角相對(duì)于屏幕左上角的 x 坐標(biāo)
screenLeft>后面的數(shù)字必須大于你顯示分辯率中的寬度
比如,800*600, 這個(gè)數(shù)得大于800
通常這兩個(gè)值設(shè)為9000
于是我使用上面的方法,實(shí)現(xiàn)了只有在關(guān)閉頁(yè)面才觸發(fā)onunload事件。
總結(jié):
① 當(dāng)使用onunload屬性時(shí),你可以使用Ajax來(lái)清除Session,也可以使用window.location.href來(lái)觸發(fā)某個(gè)請(qǐng)求,比如我在這個(gè)用的是struts2我可以用<body onunload=”javascript:window.location.href-‘${pageContext.request.contextPath }/cart/closeWindow.action'” >
然后有closeWindow.action這個(gè)請(qǐng)求去處理Session中購(gòu)物車(chē)的商品,讓其數(shù)量添加到數(shù)據(jù)庫(kù)中;
② 在此處我也有Ajax來(lái)處理請(qǐng)求,但是事實(shí)上我們只要處理Session,并不要處理完Session后有任何返回的異步信息,所以我還是使用的觸發(fā)一個(gè)請(qǐng)求的方法,最終的寫(xiě)法如下:
復(fù)制代碼 代碼如下:
<body
onunload="javascript:if(self.screenTop>9000) window.location.href='${pageContext.request.contextPath }/cart/closeWindow.action';">
您可能感興趣的文章:
- Angular.js中window.onload(),$(document).ready()的寫(xiě)法淺析
- 全面解析jQuery $(document).ready()和JavaScript onload事件
- 引用其它js時(shí)如何同時(shí)處理多個(gè)window.onload事件
- 解析頁(yè)面加載與js函數(shù)的執(zhí)行 onload or ready
- JS:window.onload的使用介紹
- js 一個(gè)關(guān)于圖片onload加載的事
- js onload處理html頁(yè)面加載之后的事件
- js之onload事件的一點(diǎn)使用心得
- 原生javascript如何實(shí)現(xiàn)共享onload事件
相關(guān)文章
詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)
Hash Map通常在JavaScript中作為一個(gè)簡(jiǎn)單的來(lái)存儲(chǔ)鍵值對(duì)的地方,不過(guò)哈希對(duì)象Object并不是一個(gè)真正的哈希映射,沒(méi)Java中的Hash Map來(lái)的那么強(qiáng)大,well,接下來(lái)帶大家詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)2016-05-05event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別?event.clientX返回事件發(fā)生時(shí),mouse相對(duì)于客戶(hù)窗口的X坐標(biāo) event.X也一樣但是如果設(shè)置事件對(duì)象的定位屬性值為relative2011-10-10JS網(wǎng)頁(yè)圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法
這篇文章主要介紹了JS網(wǎng)頁(yè)圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法,有需要的朋友可以參考一下2014-01-01Javascript 事件捕獲的備忘(setCapture,captureEvents)
Javascript 事件捕獲的備忘(setCapture,captureEvents)...2006-09-09