整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
