前端监测网址变化保障页面可靠性

2023-10-08 06:24:17







## 前言

在前端开发中，经常需要监听网址的变化，以便在网址改变时执行相应的操作。例如，当用户在页面上点击一个链接时，需要监听网址的变化，以便在新的页面加载完成后执行相应的操作。

## 监听网址变化的方法

目前，有两种常用的方法可以监听网址的变化：

* onhashchange事件
* onbeforeunload事件

### onhashchange事件

onhashchange事件是在网址的锚点（#）发生变化时触发的。例如，当用户在页面上点击一个链接，并且该链接带有锚点时，就会触发onhashchange事件。

window.onhashchange = function() {
// 在这里执行相应的操作
};


### onbeforeunload事件

onbeforeunload事件是在即将离开当前页面（刷新或关闭）时触发的。例如，当用户关闭浏览器窗口或刷新页面时，就会触发onbeforeunload事件。

window.onbeforeunload = function() {
// 在这里执行相应的操作
};


## 两种方法的优缺点

### onhashchange事件

* 优点：
    * 只会监听网址锚点的变化，因此不会影响页面的其他部分。
    * 在所有主流浏览器中都支持。
* 缺点：
    * 只能监听锚点的变化，无法监听其他类型的网址变化。
    * 当用户使用后退按钮或前进按钮时，不会触发onhashchange事件。

### onbeforeunload事件

* 优点：
    * 可以监听所有类型的网址变化，包括锚点的变化、页面的刷新和页面的关闭。
    * 在所有主流浏览器中都支持。
* 缺点：
    * 会影响页面的其他部分，例如，可能会阻止用户离开页面。
    * 当用户使用后退按钮或前进按钮时，会触发onbeforeunload事件，这可能会导致一些不必要的操作。

## 使用示例

### 使用onhashchange事件监听网址变化

Section 1 Section 2 ```

使用onbeforeunload事件监听网址变化

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <a href="page2.html">Page 2</a>

  <script>
    window.onbeforeunload = function() {
      // 在这里执行相应的操作
      console.log("页面即将离开");
    };
  </script>
</body>
</html>