在HTML中，当浏览器窗口关闭时执行脚本

浏览器关闭时执行脚本

在HTML中，有时候我们需要在用户关闭浏览器时执行一些操作，比如保存用户的草稿、清除一些临时数据等。这时候就需要用到 onbeforeunload 事件。

onbeforeunload 事件

onbeforeunload 事件在页面卸载前触发，页面卸载可以是用户关闭页面、点击链接或浏览器跳转等操作。

当这个事件被触发时，浏览器会显示一个确认框（对话框）询问用户是否要离开当前页面。这个确认框需要用户点击确认或取消才会消失。

下面是一个简单的使用 onbeforeunload 事件的示例代码：

<script>

  window.onbeforeunload = function() {
    return '您确定要离开该页面吗？';
  };
</script>

当用户在该页面进行了一些操作（比如修改表单内容），然后尝试关闭或刷新该页面时，就会出现一个对话框，提示用户当前页面上的信息可能会丢失。用户可以选择离开当前页面或者留在该页面。

onbeforeunload 事件的返回值

在使用 onbeforeunload 事件的时候，可以通过返回值来改变默认的确认框内容。返回值可以是一个字符串，字符串将出现在确认框中。

需要注意的是，有些浏览器（如Chrome）在确认框中不会显示自定义文本，而是默认显示一个固定文本。比如下面这个例子：

<script>

  window.onbeforeunload = function() {
    return '您确定要离开该页面吗？';
  };
</script>

在Chrome中，对话框提示内容将会是 该页面可能不会保存您所做的更改。。

此外，在使用 onbeforeunload 事件时，还需要注意一个问题，返回值可以是空字符串，但不能是 null 或 undefined。如果返回值为 null 或 undefined，将不会触发确认框。

利用 onbeforeunload 事件保存用户数据

在页面卸载前保存用户数据是另一个常见的需求。可以通过在 onbeforeunload 事件中发送数据到服务端或本地存储。

下面是一个使用 localStorage 存储用户数据的例子：

<script>

  window.onbeforeunload = function() {
    localStorage.setItem('draft', document.getElementById('draft').value);
  };
</script>

在用户进行页面操作时，比如修改文本框中的内容，在用户关闭页面时数据将自动保存在本地存储中。在下次访问页面时，可以通过读取本地存储中数据来恢复用户的操作。

总结

在HTML中，需要在用户关闭浏览器或页面时执行脚本时，可以使用 onbeforeunload 事件来实现。通过修改返回值可以自定义确认框内容，可以使用本地存储或发送数据到服务端来保存用户数据。