JS 监听页面刷新|极客笔记

JS 监听页面刷新

在Web开发中，经常会遇到需要在页面刷新时做一些特定操作的需求。比如说，在用户离开页面前提示用户是否保存未提交的数据或者在页面刷新时保存一些状态信息等。在这种情况下，我们可以使用JavaScript来监听页面刷新事件，并在事件发生时执行相应的操作。

监听页面刷新事件

在浏览器中，我们可以使用 beforeunload 事件来监听页面即将进行刷新的事件。当用户触发页面刷新操作时，会触发该事件，我们可以在事件处理函数中编写自己的逻辑。下面是一个简单的示例代码：

window.addEventListener('beforeunload', function(event) {
    // 在这里编写逻辑
    // 比如说弹出确认框提示用户是否离开页面
    event.returnValue = '您有尚未保存的数据，确定要离开页面吗？';
});

在上面的代码中，我们通过 addEventListener 方法来为 beforeunload 事件绑定了一个处理函数。在处理函数中，我们可以编写一些逻辑来提示用户是否离开页面。

示例代码

为了更好地演示如何监听页面刷新事件，我们可以编写一个简单的示例代码。在这个示例中，我们将监听页面刷新事件，并在用户点击页面链接或刷新页面时弹出确认框提示用户是否离开页面。

<!DOCTYPE html>
<html>
<head>
    <title>页面刷新监听示例</title>
</head>
<body>
    <h1>页面刷新监听示例</h1>
    <a href="https://www.baidu.com">跳转到百度</a>

    <script>
        window.addEventListener('beforeunload', function(event) {
            event.returnValue = '您有尚未保存的数据，确定要离开页面吗？';
        });
    </script>
</body>
</html>

在上面的示例代码中，我们通过在页面中插入一个链接并绑定 beforeunload 事件，当用户点击链接或刷新页面时会触发确认框弹窗提示用户是否离开页面。