DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現用戶離開頁面前提示是否離開此頁面的方法(包括浏覽器按鈕事件)
js實現用戶離開頁面前提示是否離開此頁面的方法(包括浏覽器按鈕事件)
編輯:關於JavaScript     

本文實例講述了js實現用戶離開頁面前提示是否離開此頁面的方法(包括浏覽器按鈕事件)。分享給大家供大家參考。具體如下:

用戶離開頁面前,提示是否離開此頁面(包括浏覽器按鈕事件)

<script type="text/javascript">
window.onbeforeunload = function(){
return "您的文章尚未保存!";
}
</script>

如果在退出頁面時需要彈出對話框,提示用戶將要退出頁面,類似當設置某個功能時而沒有保存頁面。這個實現的方法比較簡單,最常見的就是使用unload事件,但這種實現有一個缺點,就是不管同意與否,結果還是一樣,會退出頁面,因此,如果要彈出對話框,就有用戶可選擇的空間,如果確定則退出,否則就不關閉頁面

這裡推薦使用onbeforeunload()事件,意思就是在加載unload事件前執行的方法,使用如下:

<script type="text/javascript">
  window.onbeforeunload = function(){
  return "必您確定要退出頁面嗎?";
  }
</script>

這樣就會彈出一個對話框,只有確認將會退出頁面。

window.onbeforeunload可結合jQuery實現當用戶設置頁面而沒有保存的提示效果,也就是如果已保存則不應該提示出對話框,可使用如下方法,當不需要

提示對話框:

<script type="text/javascript">
 window.onbeforeunload = function(){
  return;
 }
</script>

這樣就會直接退出頁面,而不會彈出任何對話框。

結合jQuery實現Javascript退出頁面彈出對話框就是結合上面兩種方法,當頁面滿足某種情況後,如果需要彈出對話框則彈出,否則不彈出對話框,這樣就非常的方便,jQuery有自身的unload方法,但同樣不能實現返回,只有一種結果,那就是退出頁面,因此,結合window.onbeforeunload 將能實現一個退出頁面彈出對話框的功能。

PS:這裡再為大家提供一個關於JS事件的在線工具,歸納總結了JS常用的事件類型與函數功能:

javascript事件與功能說明大全:

http://tools.jb51.net/table/javascript_event

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved