前端如何实现点退后关闭窗口

136 阅读1分钟

小伙伴们晚上好,欢迎来到前端小妙招。相信大家都知道 History API,但是你知道 History API 都有哪些巧妙应用吗?下面就让我讲一讲 History API 的巧妙应用:点退后关闭窗口。

我们先看看效果。

注意看,点了退后按钮后窗口自动关闭了。这是怎么做到的呢?

首先,在打开按钮的同时执行 history.pushState,这样浏览器就会多一条历史记录而不刷新。

然后,我们点击退后按钮。这时浏览器会触发 onpopstate 事件。

最后,我们把相应的窗口关掉就可以了。

在实际使用,我们可以结合弹窗管理和路由管理进行封装,降低使用难度。

好了,本期视频就到这啦,喜欢的小伙伴可以点击订阅收藏和关注,我们下次见了,拜拜。