js中onload與onunload的使用示例
更新時間：2013年08月25日 12:33:14 作者：
onload與onunload想必大家并不陌生吧，下面為大家演示下js中onload與onunload的妙用，感興趣的朋友可以參考下，希望對大家有所幫助
引言：
今天周末沒事，就想起前面自己做的一個B2C的電子商務(wù)平臺，還有些一些地方?jīng)]有完善，就想著完善，嗯，問題是這樣的，在電子商務(wù)平臺中有這樣一個場景，我將購物車放置在Session中，使其在整個購物的過程中都能從Session中得到購物車模型，我在購物車某型中有的商品都會在數(shù)據(jù)庫中減少其購物車中購買的數(shù)量，但是如果我關(guān)閉窗口，怎樣讓Session中的購物車模型中的商品數(shù)量添加到數(shù)據(jù)庫中，于是我查找了GOOGLE、百度，得到的第一個提示，就是：關(guān)閉窗口自動清除Session，于是找到的第一個方法就是在<body>標(biāo)簽使用onunload屬性，調(diào)用某個js如：<body onunload=”close()”>該方法是關(guān)閉窗口時觸發(fā)close()事件，于是我就可以在close()方法中定義刪除Session的方法……
但是事實不是這樣的，當(dāng)你刷新這個頁面，以及點擊這個頁面上的鏈接時onunload都會觸發(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>
說明：
window.screenTop
獲取瀏覽器客戶區(qū)左上角相對于屏幕左上角的 y 坐標(biāo)
screenTop>后面的數(shù)字必須大于你顯示分辯率中的高度
比如，800*600, 這個數(shù)得大于600
window.screenLeft
獲取瀏覽器客戶區(qū)左上角相對于屏幕左上角的 x 坐標(biāo)
screenLeft>后面的數(shù)字必須大于你顯示分辯率中的寬度
比如，800*600, 這個數(shù)得大于800
通常這兩個值設(shè)為9000
于是我使用上面的方法，實現(xiàn)了只有在關(guān)閉頁面才觸發(fā)onunload事件。
總結(jié)：
① 當(dāng)使用onunload屬性時，你可以使用Ajax來清除Session，也可以使用window.location.href來觸發(fā)某個請求，比如我在這個用的是struts2我可以用<body onunload=”javascript:window.location.href-‘${pageContext.request.contextPath }/cart/closeWindow.action'” >
然后有closeWindow.action這個請求去處理Session中購物車的商品，讓其數(shù)量添加到數(shù)據(jù)庫中；
② 在此處我也有Ajax來處理請求，但是事實上我們只要處理Session，并不要處理完Session后有任何返回的異步信息，所以我還是使用的觸發(fā)一個請求的方法，最終的寫法如下：
<body
onunload="javascript:if(self.screenTop>9000) window.location.href='${pageContext.request.contextPath }/cart/closeWindow.action';">
今天周末沒事，就想起前面自己做的一個B2C的電子商務(wù)平臺，還有些一些地方?jīng)]有完善，就想著完善，嗯，問題是這樣的，在電子商務(wù)平臺中有這樣一個場景，我將購物車放置在Session中，使其在整個購物的過程中都能從Session中得到購物車模型，我在購物車某型中有的商品都會在數(shù)據(jù)庫中減少其購物車中購買的數(shù)量，但是如果我關(guān)閉窗口，怎樣讓Session中的購物車模型中的商品數(shù)量添加到數(shù)據(jù)庫中，于是我查找了GOOGLE、百度，得到的第一個提示，就是：關(guān)閉窗口自動清除Session，于是找到的第一個方法就是在<body>標(biāo)簽使用onunload屬性，調(diào)用某個js如：<body onunload=”close()”>該方法是關(guān)閉窗口時觸發(fā)close()事件，于是我就可以在close()方法中定義刪除Session的方法……
但是事實不是這樣的，當(dāng)你刷新這個頁面，以及點擊這個頁面上的鏈接時onunload都會觸發(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>
說明：
window.screenTop
獲取瀏覽器客戶區(qū)左上角相對于屏幕左上角的 y 坐標(biāo)
screenTop>后面的數(shù)字必須大于你顯示分辯率中的高度
比如，800*600, 這個數(shù)得大于600
window.screenLeft
獲取瀏覽器客戶區(qū)左上角相對于屏幕左上角的 x 坐標(biāo)
screenLeft>后面的數(shù)字必須大于你顯示分辯率中的寬度
比如，800*600, 這個數(shù)得大于800
通常這兩個值設(shè)為9000
于是我使用上面的方法，實現(xiàn)了只有在關(guān)閉頁面才觸發(fā)onunload事件。
總結(jié)：
① 當(dāng)使用onunload屬性時，你可以使用Ajax來清除Session，也可以使用window.location.href來觸發(fā)某個請求，比如我在這個用的是struts2我可以用<body onunload=”javascript:window.location.href-‘${pageContext.request.contextPath }/cart/closeWindow.action'” >
然后有closeWindow.action這個請求去處理Session中購物車的商品，讓其數(shù)量添加到數(shù)據(jù)庫中；
② 在此處我也有Ajax來處理請求，但是事實上我們只要處理Session，并不要處理完Session后有任何返回的異步信息，所以我還是使用的觸發(fā)一個請求的方法，最終的寫法如下：
復(fù)制代碼 代碼如下:
<body
onunload="javascript:if(self.screenTop>9000) window.location.href='${pageContext.request.contextPath }/cart/closeWindow.action';">
您可能感興趣的文章:
相關(guān)文章
JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組方法
這篇文章主要給大家分享了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的方法，下面文章圍繞JS數(shù)組轉(zhuǎn)換的相關(guān)資料展開內(nèi)容，對大家的學(xué)習(xí)有一定的參考價值，需要的小伙伴可以參考一下2022-01-01
js通過指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實例
下面小編就為大家?guī)硪黄猨s通過指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript語言實現(xiàn)多彩線條擺出心形效果，文中的實現(xiàn)步驟講解詳細(xì)，快跟隨小編一起動手嘗試一下吧2022-07-07
electron多標(biāo)簽頁模式更像客戶端的實現(xiàn)示例
本文主要介紹了electron多標(biāo)簽頁模式更像客戶端,通過創(chuàng)建和管理多個網(wǎng)頁視圖或使用現(xiàn)成組件來實現(xiàn)類似Web瀏覽器的標(biāo)簽頁功能,具有一定的參考價值,感興趣的可以了解一下2024-11-11
JavaScript中實現(xiàn)new的兩種方式引發(fā)的探究
眾所周知JS中new的作用是通過構(gòu)造函數(shù)來創(chuàng)建一個實例對象，這篇文章主要給大家介紹了關(guān)于JavaScript中實現(xiàn)new的兩種方式引發(fā)的相關(guān)資料，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
有空把JAVASCRIPT對EXCEL的操作進(jìn)行了封裝，大家可以根據(jù)自己實際的需要在此基礎(chǔ)上進(jìn)行擴充。詳細(xì)的請看代碼2009-07-07
這篇文章主要為大家詳細(xì)介紹了JSx實現(xiàn)簡單控制視頻播放倍速，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
JavaScript Rxjs mergeMap 的使用場合
這篇文章主要介紹了JavaScript Rxjs mergeMap 的使用場合,mergeMap 接收一個函數(shù)作為輸入?yún)?shù)，這個函數(shù)的輸入?yún)?shù)就是通過 pipe 鏈接 mergeMap 的 Observable 里包含的元素2022-07-07
本文主要介紹了js實現(xiàn)新增加事件：時間軸自動排列效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03