工作中遇到有這樣的情景,要在瀏覽器窗口關閉的時候,提示用戶某種操作。
類似在關閉窗口時,提示用戶保存當前內容,選擇是則保存并關閉窗口,選擇否則不關閉窗口,也不做保存操作。
網上找了很多,都是說用js處理window關閉事件的,要么說onbeforeunload 方法,要么說onunload 方法。
感覺都不能實現。后來突然想到這樣的辦法:用這兩個方法一起來實現!
原因:
onbeforeunload 事件將會在關閉窗口前執行,你也可以用戶決定是否關閉窗口,這個方法只要有返回值并且不是""或null;他就會出一個提示窗口(對ie,firefox沒有試過)。
單用這一個方法不能實現上面說的出提示,選擇“是”,然后做保存動作的。
且不為空返回值會做為提示是否關閉本窗口的內容提示。
onunload 是在關閉窗口之后執行,不是在關閉窗口之前執行。在這方法里不管做了什么,最后窗口都會關閉。
現在將這兩個方法合起來,就正好實現了我們的需求,第一個方法出提示,第二個方法實現選擇“是”后的動作:即保存數據。
這里給出示例代碼,不考慮刷新的問題。
類似在關閉窗口時,提示用戶保存當前內容,選擇是則保存并關閉窗口,選擇否則不關閉窗口,也不做保存操作。
網上找了很多,都是說用js處理window關閉事件的,要么說onbeforeunload 方法,要么說onunload 方法。
感覺都不能實現。后來突然想到這樣的辦法:用這兩個方法一起來實現!
原因:
onbeforeunload 事件將會在關閉窗口前執行,你也可以用戶決定是否關閉窗口,這個方法只要有返回值并且不是""或null;他就會出一個提示窗口(對ie,firefox沒有試過)。
單用這一個方法不能實現上面說的出提示,選擇“是”,然后做保存動作的。
且不為空返回值會做為提示是否關閉本窗口的內容提示。
onunload 是在關閉窗口之后執行,不是在關閉窗口之前執行。在這方法里不管做了什么,最后窗口都會關閉。
現在將這兩個方法合起來,就正好實現了我們的需求,第一個方法出提示,第二個方法實現選擇“是”后的動作:即保存數據。
這里給出示例代碼,不考慮刷新的問題。
var isSave =false;
function save(){
//do something
}
window.onbeforeunload = function() {
if(!isSave){
return "當前數據還沒有保存,關閉或刷新窗口會自動保存數據,是否繼續?";
}else{
return "";
}
}
window.onunload = function() {
if(!isSave){
save();
}
}
function save(){
//do something
}
window.onbeforeunload = function() {
if(!isSave){
return "當前數據還沒有保存,關閉或刷新窗口會自動保存數據,是否繼續?";
}else{
return "";
}
}
window.onunload = function() {
if(!isSave){
save();
}
}