JavaScript捕獲window視窗關閉事件

來源:互聯網
上載者:User

JavaScript捕獲window視窗關閉事件

工作中遇到有這樣的情景,要在瀏覽器視窗關閉的時候,提示使用者某種操作。
類似在關閉視窗時,提示使用者儲存當前內容,選擇是則儲存並關閉視窗,選擇否則不關閉視窗,也不做儲存操作。

網上找了很多,都是說用js處理window關閉事件的,要麼說onbeforeunload 方法,要麼說onunload方法。
感覺都不能實現。後來突然想到這樣的辦法:用這兩個方法一起來實現!

原因:
onbeforeunload 事件將會在關閉視窗前執行,你也可以使用者決定是否關閉視窗,這個方法只要有傳回值並且不是""或null;他就會出一個提示視窗(對ie,firefox沒有試過)。
單用這一個方法不能實現上面說的出提示,選擇“是”,然後做儲存動作的。

且不為空白傳回值會做為提示是否關閉本視窗的內容提示。
onunload 是在關閉視窗之後執行,不是在關閉視窗之前執行。在這方法裡不管做了什麼,最後視窗都會關閉。


現在將這兩個方法合起來,就正好實現了我們的需求,第一個方法出提示,第二個方法實現選擇“是”後的動作:即儲存資料。


這裡給出範例程式碼,不考慮重新整理的問題。

var isSave =false;
function save(){
//dosomething
}
window.onbeforeunload =function() {

if(!isSave){
return "當前資料還沒有儲存,關閉或重新整理視窗會自動儲存資料,是否繼續?";
}else{
return "";
}
}
window.onunload =function() {
if(!isSave){
save();
}
}

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.