捕獲瀏覽器關(guān)閉、刷新事件不同情況下的處理方法
由于瀏覽器是無狀態(tài)的,在這時(shí)候捕捉瀏覽器關(guān)閉會(huì)出現(xiàn)兩種情況:
1.真正的關(guān)閉瀏覽器 (a.點(diǎn)擊關(guān)閉按鈕 b.右擊任務(wù)欄關(guān)閉 c.按alt+F4關(guān)閉)
2.刷新瀏覽器。
那如何判斷區(qū)分這兩種動(dòng)作呢?
一. Javascript代碼處理方法:
function window.onbeforeunload()
{
//用戶點(diǎn)擊瀏覽器右上角關(guān)閉按鈕或是按alt+F4關(guān)閉
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
// alert("點(diǎn)關(guān)閉按鈕");
document.getElementById("hiddenForm:hiddenBtn").click();
// window.event.returnValue="確定要退出本頁(yè)嗎?";
}
//用戶點(diǎn)擊任務(wù)欄,右鍵關(guān)閉。s或是按alt+F4關(guān)閉
else if(event.clientY > document.body.clientHeight || event.altKey)
{
// alert("任務(wù)欄右擊關(guān)閉");
document.getElementById("hiddenForm:hiddenBtn").click();
// window.event.returnValue="確定要退出本頁(yè)嗎?";
}
//其他情況為刷新
else
{
// alert("刷新頁(yè)面");
}
}
其中 event.clientX 鼠標(biāo)光標(biāo)X坐標(biāo)
document.body.clientWidth 窗體工作區(qū)寬度
event.clientY 鼠標(biāo)光標(biāo)Y坐標(biāo)
event.altKey 是否按下alt鍵
二. 事件捕捉方法:
<body scroll="no" onbeforeunload="return CloseEvent();" onunload="UnLoadEvent()" >
</body>
<script language="JavaScript" type="text/javascript">
var DispClose = true;
function CloseEvent()
{
if (DispClose)
{
return "是否離開當(dāng)前頁(yè)面?";
}
}
function UnLoadEvent()
{
DispClose = false;
//在這里處理關(guān)閉頁(yè)面前的動(dòng)作
}
</script>
在頁(yè)面卸載之前引發(fā)onbeforeunload事件,如果用戶選擇“是”即確定卸載頁(yè)面將引發(fā)onunload事件,否則返回頁(yè)面不做任何操作。
- 基于Jquery 解決Ajax請(qǐng)求的頁(yè)面 瀏覽器后退前進(jìn)功能,頁(yè)面刷新功能實(shí)效問題
- JavaScript不刷新實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能
- js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進(jìn)事件
- Js智能判斷瀏覽器是關(guān)閉還是刷新的代碼
- 基于JavaScript判斷瀏覽器到底是關(guān)閉還是刷新(超準(zhǔn)確)
- 驗(yàn)證碼在IE中不刷新而谷歌等瀏覽器正常的解決方案
- 解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁(yè)面
- JS區(qū)分瀏覽器頁(yè)面是刷新還是關(guān)閉
- javaweb用戶注銷后點(diǎn)擊瀏覽器返回刷新頁(yè)面重復(fù)登錄問題的解決方法
- 深入理解瀏覽器的各種刷新規(guī)則
相關(guān)文章
js實(shí)現(xiàn)json數(shù)組分組合并操作示例
這篇文章主要介紹了js實(shí)現(xiàn)json數(shù)組分組合并操作,涉及javascript針對(duì)json數(shù)組的遍歷、判斷、添加、賦值等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02ES6 javascript中class靜態(tài)方法、屬性與實(shí)例屬性用法示例
這篇文章主要介紹了ES6 javascript中class靜態(tài)方法、屬性與實(shí)例屬性用法,結(jié)合實(shí)例形式分析了ES6中類的靜態(tài)方法、靜態(tài)屬性概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10詳解利用exif.js解決ios手機(jī)上傳豎拍照片旋轉(zhuǎn)90度問題
這篇文章主要介紹了詳解利用exif.js解決ios手機(jī)上傳豎拍照片旋轉(zhuǎn)90度問題,有需要的朋友可以了解一下。2016-11-11基于javascript實(shí)現(xiàn)的購(gòu)物商城商品倒計(jì)時(shí)實(shí)例
本文主要介紹了基于javascript實(shí)現(xiàn)的購(gòu)物商城商品倒計(jì)時(shí)實(shí)例,代碼詳細(xì),可直接復(fù)制試試看效果。需要的朋友可以參考借鑒2016-12-12Javascript 檢測(cè)、添加、移除樣式(className)函數(shù)代碼
在前臺(tái)腳本中,我們經(jīng)常要操作頁(yè)面元素的樣式,比如標(biāo)簽頁(yè)切換時(shí),將當(dāng)前標(biāo)簽加上一個(gè)樣式,當(dāng)切換到其他標(biāo)簽時(shí),再將樣式還原,本文介紹的是直接添加和移除 className 的方法。2009-09-09Javascript 繼承機(jī)制的實(shí)現(xiàn)
要用ECMAScript實(shí)現(xiàn)繼承機(jī)制,首先從基類入手。所有開發(fā)者定義的類都可作為基類。出于安全原因,本地類和宿主類不能作為基類,這樣可以防止公用訪問編譯過的瀏覽器級(jí)的代碼,因?yàn)檫@些代碼可以被用于惡意攻擊。2009-08-08JavaScript使用function定義對(duì)象并調(diào)用的方法
這篇文章主要介紹了JavaScript使用function定義對(duì)象并調(diào)用的方法,實(shí)例分析了javascript中function定義及使用對(duì)象與方法的相關(guān)技巧,需要的朋友可以參考下2015-03-03FormValidate 表單驗(yàn)證功能代碼更新并提供下載
加入驗(yàn)證模式 4,同3,但是當(dāng)驗(yàn)證不通過時(shí),立即停止向下檢查。在模式3下,如果發(fā)生錯(cuò)誤,會(huì)把錯(cuò)誤記錄,并向下檢查,模式4就不向下檢查了2008-08-08js實(shí)現(xiàn)簡(jiǎn)潔大方的二級(jí)下拉菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)潔大方的二級(jí)下拉菜單效果代碼,涉及javascript通過鼠標(biāo)事件控制頁(yè)面元素的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09