整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
onbeforeunload事件 是指在瀏覽器刷新 或者關閉的時候 在卸載文檔的之前的事件
監聽該事件可以在瀏覽器窗口關閉之前 做一些提示等操作
兼容性：
目前各瀏覽器都支持該事件 但是大版本的chrome firefix 和Safari 都已經刪除了自定義消息
各瀏覽器用法和表現
chrome 高版本取消了自定義提示
chrome
firefox
Safari
IE9 目前IE支持自定義消息
要點：
各瀏覽器對該事件支持有差異 對自定義消息有的支持有的不支持
于安全和隱私的原因，web 應用程序不能直接訪問用戶設備上的文件。如果需要讀取一個或多個本地文件，可以通過使用input file和FileReader來實現。在這篇文章中，我們將通過一些例子來看看它是如何工作的。
由于瀏覽器中的 JS 無法從用戶的設備訪問本地文件，我們需要為用戶提供一種方法來選擇一個或多個文件供我們使用。這可以通過文件選擇器<input type='fule' />來完成。
<input type="file" id="fileInput">如果想允選擇多個文件，可以添加multiple屬性:
<input type="file" id="fileInput" multiple>我們可以通過change事件來監聽文件的選擇，也可以添加另一個 UI 元素讓用戶顯式地開始對所選文件的處理。
input file 具有一個files屬性，該屬性是File對象的列表（可能有多個選擇的文件）。
File對象如下所示：
讀取文件，主要使用的是[FileReader][1]類。
「該對象擁有的屬性：」
「FileReader.error」 ：只讀，一個DOMException，表示在讀取文件時發生的錯誤 。
「FileReader.readyState」：只讀 表示 FileReader 狀態的數字。取值如下：
常量名值描述EMPTY0還沒有加載任何數據LOADING1數據正在被加載DONE2已完成全部的讀取請求
「FileReader.result」：只讀，文件的內容。該屬性僅在讀取操作完成后才有效，數據的格式取決于使用哪個方法來啟動讀取操作。
「該對象擁有的方法：」
readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個參數代表編碼格式。
readAsDataUrl(file)：讀取文件并且將文件以數據URI的形式保存在result屬性中。
readAsBinaryString(file)：讀取文件并且把文件以字符串保存在result屬性中。
readAsArrayBuffer(file)：讀取文件并且將一個包含文件內容的ArrayBuffer保存咋result屬性中。
FileReader.abort()：中止讀取操作。在返回時，readyState屬性為DONE。
「文件讀取的過程是異步操作，在這個過程中提供了三個事件：progress、error、load事件。」
progress：每隔50ms左右，會觸發一次progress事件。
error：在無法讀取到文件信息的條件下觸發。
load：在成功加載后就會觸發。
在下面的示例中，我們將使用readAsText和readAsDataURL方法來顯示文本和圖像文件的內容。
為了將文件內容顯示為文本，change需要重寫一下：
首先，我們要確保有一個可以讀取的文件。如果用戶取消或以其他方式關閉文件選擇對話框而不選擇文件，我們就沒有什么要讀取和退出函數。
然后我們繼續創建一個FileReader。reader的工作是異步的，以避免阻塞主線程和 UI 更新，這在讀取大文件(如視頻)時非常重要。
reader發出一個'load'事件(例如，類似于Image對象)，告訴我們的文件已經讀取完畢。
reader將文件內容保存在其result屬性中。此屬性中的數據取決于我們使用的讀取文件的方法。在我們的示例中，我們使用readAsText方法讀取文件，因此result將是一個文本字符串。
如果我們想要顯示圖像，將文件讀取為字符串并不是很有用。FileReader有一個readAsDataURL方法，可以將文件讀入一個編碼的字符串，該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同，區別是我們使用readAsDataURL讀取文件并將結果顯示為圖像:
1）由于安全和隱私的原因，JavaScript 不能直接訪問本地文件。
2）可以通過 input 類型為 file 來選擇文件，并對文件進行處理。
3） file input 具有帶有所選文件的files屬性。
4） 我們可以使用FileReader來訪問所選文件的內容。
作者: Martin Splitt 譯者：前端小智 來源：dev
原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn
動端的回退鍵通常是指手機或平板設備上的物理返回鍵或者虛擬返回鍵，用戶點擊該鍵時通常會引起頁面的跳轉或關閉，因此也需要在 JavaScript 中對該事件進行監聽和處理。
本篇文章將為您提供如何使用 JavaScript 監聽移動端回退鍵事件的多種方法，以及如何在處理事件時避免一些常見的問題。
一、使用 popstate 事件監聽回退鍵
在 JavaScript 中，可以使用 `window.history` 對象的 `popstate` 事件監聽用戶在瀏覽器中點擊了回退或前進按鈕的事件，該事件支持移動設備上的回退鍵，使用方法如下：
```js
window.addEventListener('popstate', function() {
// 處理回退鍵事件
});
```
`popstate` 事件會在用戶點擊瀏覽器的回退或前進按鈕或者在 JavaScript 中調用 `history.back()` 或 `history.forward()` 方法時觸發，而在移動端，用戶點擊系統上的回退鍵同樣也會觸發該事件。
需要注意的是，使用 `popstate` 事件監聽回退鍵時，不能使用 `history.pushState()` 方法修改頁面的 URL，因為該方法只會在瀏覽器的歷史記錄中添加一條新記錄，并不會觸發 `popstate` 事件。如果需要修改頁面的 URL 并觸發 `popstate` 事件，可以使用 `history.replaceState()` 方法。
二、使用 onbeforeunload 事件監聽回退鍵
除了`popstate`事件，還可以使用`onbeforeunload`事件監聽回退鍵，使用方法如下：
```js
window.onbeforeunload = function() {
// 處理回退鍵事件
};
```
`onbeforeunload`事件會在窗口或標簽頁關閉或重新加載之前觸發，如果用戶點擊了系統上的回退鍵，則會取消頁面的關閉或重新加載操作，因此可以在該事件中處理回退事件。
需要注意的是，由于瀏覽器安全策略的限制，無法在 `onbeforeunload` 事件中彈出任何提示框，只能返回一個字符串值，該值將被瀏覽器作為提示內容顯示在提示框中。
三、多種方法結合使用
除了上述兩種方法外，還可以將它們結合起來使用，以達到更好的效果，具體步驟如下：
1. 使用 `pushState()` 方法修改頁面的 URL。
```js
history.pushState(null, null, 'newpage.html');
```
2. 立即使用 `location.reload()` 方法重新加載頁面。
```js
location.reload();
```
使用這種方法，即使沒有真正跳轉到新頁面，也可以觸發 `popstate` 事件，從而實現監聽移動端回退鍵事件的功能。
在處理回退事件時，通常需要判斷當前頁面是否是最后一頁，如果是最后一頁，則直接關閉或返回到前一個頁面，否則繼續回退到上一個頁面。
下面給出一個完整的示例代碼：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>監聽手機回退鍵事件</title>
</head>
<body>
<h1>監聽手機回退鍵事件</h1>
<p>點擊下面的按鈕跳轉到新頁面</p>
<button onclick="goToNewPage()">跳轉</button>
<script>
// 添加 popstate 事件監聽器
window.addEventListener('popstate', function() {
console.log('用戶點擊了系統回退按鈕');
// 判斷頁面是否是最后一頁
if (history.length == 1) {
// 關閉當前頁面
window.close();
} else {
// 回退到上一個頁面
history.back();
}
});
// 添加 onbeforeunload 事件監聽器
window.onbeforeunload = function() {
console.log('用戶點擊了系統回退按鈕');
// 判斷頁面是否是最后一頁
if (history.length == 1) {
// 關閉當前頁面
window.close();
}
};
// 跳轉到新頁面
function goToNewPage() {
history.pushState(null, null, 'newpage.html');
location.reload();
}
</script>
</body>
</html>
```
在該示例代碼中，我們實現了監聽 `popstate` 事件和 `onbeforeunload` 事件的功能，并且在頁面中添加了一個按鈕，當用戶點擊該按鈕時，會使用 `history.pushState()` 方法將頁面的 URL 改變，然后使用 `location.reload()` 方法重新加載頁面，這樣就可以觸發 `popstate` 和 `onbeforeunload` 事件了。
需要注意的是，因為 `pushState()` 方法只是修改了頁面的 URL，并沒有真正跳轉到新頁面，所以為了能夠處理回退事件，我們需要在 `pushState()` 方法后面立即調用 `location.reload()` 方法，這樣瀏覽器就會認為我們跳轉到了新頁面，然后在回退時就可以觸發 `popstate` 和 `onbeforeunload` 事件了。
同時，我們還在事件處理函數中添加了判斷頁面是否是最后一頁的代碼，如果是最后一頁，則直接關閉或返回到前一個頁面。如果不加這個判斷，當用戶點擊回退鍵時，頁面會一直回退到瀏覽器的起始頁面，這樣就無法正常退出應用了。
總結：
本篇文章介紹了如何使用 JavaScript 監聽移動端回退鍵事件，并提供了多種方法及相應的示例代碼。對于需要在移動端開發中處理回退事件的開發人員來說，這些方法都是非常實用的，可以有效地解決移動端回退事件的問題。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
