onbeforeunload判断是关闭还是刷新
时间: 2023-08-09 21:11:23 浏览: 95
`onbeforeunload` 事件在页面关闭或刷新时触发,可以用来执行一些清理工作或者提示用户保存未保存的数据。在这个事件中,可以通过 `event.currentTarget.performance.navigation.type` 属性来判断是关闭还是刷新页面。
当用户点击关闭按钮或者使用快捷键关闭页面时,`performance.navigation.type` 的值为 `1`;而当用户使用 F5 或者点击浏览器的刷新按钮时,`performance.navigation.type` 的值为 `0`。
以下是示例代码:
```javascript
window.addEventListener('beforeunload', function(event) {
if (event.currentTarget.performance.navigation.type === 1) {
console.log('用户关闭了页面');
} else if (event.currentTarget.performance.navigation.type === 0) {
console.log('用户刷新了页面');
}
});
```
相关问题
用JS判断浏览器刷新还是关闭并兼容各大浏览器
可以使用 `beforeunload` 事件来判断浏览器是刷新还是关闭,并且该事件是兼容各大浏览器的。
以下是判断浏览器是刷新还是关闭的示例代码,并且兼容各大浏览器:
```javascript
// 判断是否是刷新
var isRefresh = false;
window.onbeforeunload = function(event) {
var e = window.event || event;
// 判断是否是刷新
if (e.clientX > document.body.clientWidth && e.clientY < 0 || e.altKey) {
isRefresh = true;
} else {
isRefresh = false;
}
// 兼容各大浏览器
e.returnValue = "确定离开当前页面吗?";
return "确定离开当前页面吗?";
};
// 判断是否是关闭
window.onunload = function() {
if (!isRefresh) {
console.log("浏览器正在关闭...");
}
};
```
以上代码中,使用 `onbeforeunload` 事件来判断是否是刷新或关闭,并且使用 `onunload` 事件来判断是否是关闭,并且兼容各大浏览器。其中,`clientX` 和 `clientY` 属性用于判断是否是点击浏览器关闭按钮,`altKey` 属性用于判断是否是使用快捷键关闭浏览器。
js onbeforeunload
`onbeforeunload`是一个JavaScript事件,当用户正在离开页面时被触发。通常用于在用户离开之前提示用户是否保存未保存的更改或离开当前页面。
可以使用`window.onbeforeunload`来添加此事件的监听器。在监听器函数中,可以返回一个字符串消息,以提示用户离开当前页面会导致什么后果。如果返回的字符串不为空,浏览器会显示一个确认对话框来提示用户确认是否离开页面。用户可以选择留在页面或者继续离开。
需要注意的是,在一些浏览器中,如果没有用户的明确操作(例如点击链接或按钮),则`onbeforeunload`事件可能不会触发,因此不能完全依赖该事件来保存用户数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)