JS--popstate事件--使用/教程/实例

桃扇骨 2023-09-29 16:52 6阅读 0赞

原文网址：[JS--popstate事件--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][JS--popstate_--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍JavaScript的popstate事件的用法。

**官网网址**

[WindowEventHandlers.onpopstate - Web API 接口参考 | MDN][WindowEventHandlers.onpopstate - Web API _ _ MDN]

**相关网址**

[JS--history--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客\_js中history][JS--history--_IT_-CSDN_js_history]

## 概述 ##

当history对象发生变化时，就会触发popState事件。通过event.state可以访问当前历史记录的状态对象的拷贝。

当网页加载时，各浏览器对popstate事件是否触发有不同的表现，Chrome 和 Safari会触发popstate事件，而Firefox不会。

## **会触发popstate事件的场景** ##

1.  用户点击浏览器的前进、后退按钮
2.  代码中调用history.back() 、history.forward()、history.go()
3.  a 标签的锚点

## **不会触发popstate事件的场景** ##

1.  代码中调用pushState()、replaceState()

## **代码示例** ##

window.onpopstate = function(event) {
      console.log(event.state)
    }
    
    // 或者
    window.addEventListener('popstate', function(event) {
      console.log('state: ' + JSON.stringify(event.state));
    });

[JS--popstate_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126131894
[WindowEventHandlers.onpopstate - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event
[JS--history--_IT_-CSDN_js_history]: https://knife.blog.csdn.net/article/details/122751325

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 PostMan--使用/教程/实例

原文网址：[PostMan--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][PostMan--_IT_-CSDN] 简介用户在开发或者调试网络程序或者是网页

喜欢ヅ旅行/ 2023年10月07日 12:04/ 0 赞/ 67 阅读

相关 JS--hashchange事件--使用/教程

原文网址：[JS--hashchange事件--使用/教程\_IT利刃出鞘的博客-CSDN博客][JS--hashchange_--_IT_-CSDN] 简介说明

太过爱你忘了你带给我的痛/ 2023年09月29日 16:53/ 0 赞/ 6 阅读

相关 JS--popstate事件--使用/教程/实例

原文网址：[JS--popstate事件--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][JS--popstate_--_IT_-CSDN] 简介说明本

桃扇骨/ 2023年09月29日 16:52/ 0 赞/ 7 阅读

相关 apifox--使用/教程/实例

原文网址：[apifox--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][apifox--_IT_-CSDN] 简介本文用示例介绍apifox的用法。

亦凉/ 2023年09月29日 09:27/ 0 赞/ 33 阅读

相关 laravel mysql触发器_Laravel 5.1 定义事件、事件监听器以及触发事件实例教程

Laravel 5.1 定义事件、事件监听器以及触发事件实例教程由学院君创建于5年前, 最后更新于 9个月前版本号 \2 27620 views 15 like

川长思鸟来/ 2022年10月24日 13:11/ 0 赞/ 281 阅读

相关 Redisson--使用/教程/实例

原文网址：[Redisson--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Redisson--_IT_-CSDN] 简介说明本文用实例介绍Redis

小咪咪/ 2022年09月15日 05:46/ 0 赞/ 626 阅读

相关 JWT--使用/教程/实例

原文网址：[JWT--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][JWT--_IT_-CSDN] 简介说明本文介绍JWT知识。包括：什么是JWT、JW

叁歲伎倆/ 2022年09月14日 11:18/ 0 赞/ 275 阅读

相关 SkyWalking--使用/教程/实例

原文网址：[SkyWalking--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][SkyWalking--_IT_-CSDN] 本文是SkyWalking简单示例，

╰半橙微兮°/ 2022年08月28日 14:45/ 0 赞/ 336 阅读

相关 LocalDateTime--使用/教程/实例

原文网址：[LocalDateTime--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][LocalDateTime--_IT_-CSDN] 简介说明本文

深碍√TFBOYSˉ_/ 2022年08月28日 14:44/ 0 赞/ 367 阅读

相关 Qt中多事件使用实例

点击(此处)折叠或打开 1. /\\\\\\\\\\\\\\\moveico.h\\\\\\\\\\\\/ 2. \ifndef MOV

左手的ㄟ右手/ 2022年08月02日 14:43/ 0 赞/ 161 阅读