頁面資料關閉，或重新整理，或連結到其他頁面提示有否儲存資料

阿新 • • 發佈：2019-01-20

問題：在我開發過程中遇到的需求，當用戶在修改或新增某些資料時可能會忘記儲存就關閉頁面或者連結到其他頁面去，如果沒有提示那麼倖幸苦苦的填的資料就會丟失

解決辦法： window.onbeforeunload 這個事件

onbeforeunload 事件是在即將離開此頁面之前觸發（包括重新整理，關閉頁面，跳轉到其他頁面），會彈出提示框是否離開此頁面，

基本用法

<!---可以新增自己的方法->

return “提示資訊”
}
</script>

說明：如果有return那麼他會彈出提示框，否則將直接跳轉，不會提示，利用這個特性可以判斷使用者輸入的資料是否改變，如果有改變則提示，沒有改變則不提示，直接跳轉

程式碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onbeforeunload = function () {

//
var oListen = document.getElementById("IsChanged").value;
if (oListen == "true") {
return "資料未儲存是否離開?";
}
}
</script>
</head>
<body>
測試跳轉頁面彈出提示
<a href="http://www.baidu.com"> baidu</a>
改變： <input type="text" id="text1" onchange="document.getElementById('IsChanged').value = 'true';" />

在需要監聽的文字框加onchange事件，改變就讓隱藏的input的值改變，最後再判斷
<button onclick="document.getElementById('IsChanged').value = 'false';alert('已儲存');">儲存</button>

如果使用者儲存了就將值改變回來
<input type="hidden" id="IsChanged" />
</body>
</html>

頁面資料關閉，或重新整理，或連結到其他頁面提示有否儲存資料

頁面資料關閉，或重新整理，或連結到其他頁面提示有否儲存資料

頁面載入進入後臺，回來重新整理，且只重新整理一次，避免無限重新整理

asp.net---iframe切分頁面，區域性重新整理，一個頁面的點選事件在另一個頁面響應

vue——詳細頁返回列表頁，不重新整理，保留列表頁原來停留位置

資料結構之通用樹（使用連結串列實現樹的儲存結構，雙親孩子表示法）

vue 頁面跳轉(兄弟元件)通過路由或vuex 進行傳遞引數，並且實現重新整理資料不消失

網頁拉到底部後，點選重新整理按鈕或F5，頁面內容重複顯示

瀏覽器重新整理頁面/關閉頁面時，使用jquery+ajax儲存資料的方法

JavaScript（1）：Js實現web頁面一段時間沒操作，退出或關閉頁面

sharepoint 2013 使用Office Web Apps 查看或編輯office文檔時頁面出現：“抱歉，出現了問題”錯誤

vue高階屬性 provide/inject，父元件向子元件或父元件的子元件的子元件...傳遞資料

基於資料探勘的高校個性化學生管理方案研究——以A高校資料集為例（未發表，使用或引用前請提前告知）

C#如何操控FTP，獲取FTP檔案或資料夾列表，獲取FTP檔案大小，FTP上傳，FTP刪除檔案，FTP新建資料夾、刪除資料夾

layer刪除幾秒後，執行重新整理或跳轉

onbeforeunload事件在頁面關閉或重新整理時觸發

jq或js父元素、子元素之間頁面元素的獲取，以及使用後臺模板遇到無法將子頁面取到的值顯示在彈出的頁面上的問題

從大資料殺熟到“全網殺熟”，“優質韭菜”使用者或已被全網跟蹤

異或和，窮舉所有資料

unity3d中利用AVPro video播放mkv視訊切換音軌，多音軌切換，實現ktv開啟或關閉原唱功能

純前端實現上傳圖片到本地或伺服器，並根據時間建立資料夾，無需後臺

頁面資料關閉，或重新整理，或連結到其他頁面提示有否儲存資料

相關推薦