Javascript 基础夯实 —— 浏览器页面事件

次人君

希望可以变得更好

本文速度仅需一分钟

在做业务开发的时候，碰到过这样的问题：

部分浏览器，如 Safari 中，从后一个页面返回到上一个页面的时候，页面并不会进行刷新，而是维持着该页面最后的状态。这样在用户不知道已经提交过的情况下，就有可能再次提交，导致用户体验不佳等情况

那么该如何解决这种问题呢？我们很容易会联想到如果可以像原生 App 开发中一样，监听到页面的生命周期，那这个问题自然就迎刃而解

那么浏览器中有没有页面的生命周期方法呢？其实并没有，但是却有类似功能的事件来帮助我们解决问题

浏览器页面事件

浏览器的页面事件有下面几种：

下面对这些事件进行说明：

该事件在页面第一次加载时触发，如果页面是从浏览器缓存中读取的，则不会触发

window.onload = (e) => {
    alert('page onload')

该事件在页面每次加载时都会触发，也就是说，即使页面是从浏览器中读取的，也会触发这个事件

机智的小伙伴一定想到了，我们可以用这个方法来判断返回后的页面是不是直接读取的缓存中的页面

但是还有一个问题， onpageshow 虽然每次都会触发，但是该如何判断是不是从缓存中读取的呢？请看下面的代码：

window.onpageshow = (e) => {