popState 监听浏览器切换路由

浏览器内 popState 监听器使用

在前端开发过程中，在一些业务场景中可能会遇到监听浏览器前进/后退、控制路由等情况。我们可以使用Web API提供的popState事件来处理这些情况，提到popState，应用中，通常pushState配合使用。

popState

Usage

window.addEventListener('popstate', (event) => {console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});window.onpopstate = function(event) {console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）
不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。

pushState

Usage

history.pushState(state, title[, url])

参数

state

状态对象是一个JavaScript对象，它与由创建的新历史记录条目相关联 pushState()。每当用户导航到新状态时，popstate 就会触发一个事件，并且state 该事件的属性包含历史记录条目的状态对象的副本。

状态对象可以是任何可以序列化的对象。因为Firefox将状态对象保存到用户的磁盘上，以便用户重新启动浏览器后可以将其还原，所以我们对状态对象的序列化表示施加了640k个字符的大小限制。如果将序列化表示形式大于此值的状态对象传递给 pushState()，则该方法将引发异常。如果您需要更多空间，建议您使用sessionStorage 或 localStorage。

title

当前大多数浏览器都忽略此参数，尽管将来可能会使用它。在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为要移动的州传递简短的标题。

url 可选的

新历史记录条目的URL由此参数指定。请注意，浏览器不会在调用之后尝试加载该URL pushState()，但是可能会稍后尝试加载该URL，例如，在用户重新启动浏览器之后。新的URL不必是绝对的。如果是相对的，则相对于当前URL进行解析。新网址必须与当前网址具有相同的来源；否则， pushState() 将引发异常。如果未指定此参数，则将其设置为文档的当前URL。

pushState类似于插入了一条新的历史记录，当用户返回时，只会返回到插入之前的url，再次点击返回才会回到原先的页面。调用次数和返回次数相关。popState用来监听历史记录变化。通过调用pushState方法，可以实现阻止浏览器立即返回上一页、自定义返回事件等。

实际案例

下面是几种遇到的场景，欢迎大家补充！

用户触发后退时，阻止浏览器立即返回。

const state = {title: 'title',url: location.hash,
};window.history.pushState(state, 'detail', location.hash);

当页面中出现弹窗、全屏组件等情况，尤其是在移动端h5页面，当用户需要关闭弹窗、取消全屏组件时，可能会使用物理返回键，这时会直接返回上一页面，而不是关闭弹窗。

// 在React框架中的示例
componentDidMount() {const state = {title: 'title',url: location.hash,};if (!window.history.state) {window.history.pushState(state, 'detail', location.hash);}window.addEventListener('popstate', this.popStateHandler, false);
}componentWillUnmount() {console.log('componentWillUnmount');window.removeEventListener('popstate', this.popStateHandler, false);
}popStateHandler = (state) => {// 有弹窗时返回事件处理console.log(state);const { showModal } = this.state;const { currentTarget = {} } = state;const { location: { hash } } = currentTarget;if (showModal) {this.setState({showModal: false, // 关闭弹窗});const s = {title: 'title',url: location.hash,};// 因为可能会出现多次弹窗，所以再次pushStatewindow.history.pushState(s, 'detail', location.hash);} else if (hash.indexOf('detail') !== -1) {// 无弹窗时直接返回上一页面，调用一次goBack();// 这里通过hash对比currentTarget是否是当前页面，不进行判断直接返回会造成返回两次！！！history.goBack();}
}

单独维护当前页面，当页面可能跳转至下一页面时，返回该页面时不再调用pushState

const state = {title: 'title',url: location.hash,
};if (!window.history.state) {// 做一个是否已经pushState的判断，没有pushState才调用，history.state即pushState的第一个参数window.history.pushState(state, 'detail', location.hash);
}

Created: Jul 30, 2020 10:48 AM
Author: Liquorxm
Tags: history, popstate, pushState, router, React, frontend