前端中tostring方法有什么作用(前端基础什么是popstate事件)

当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back()

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。

测试: 打开http://example.com/example.html页面,在控制台console分页tab下,分别运行代码:

window.addEventListener('popstate', (event) => { console.log("location: " document.location ", state: " JSON.stringify(event.state)); }); history.pushState({page: 1}, "title 1", "?page=1"); history.pushState({page: 2}, "title 2", "?page=2"); history.replaceState({page: 3}, "title 3", "?page=3"); history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // Logs "location: http://example.com/example.html, state: null history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}

点击浏览器回退或者前进按钮:

前端中tostring方法有什么作用(前端基础什么是popstate事件)(1)

前端中tostring方法有什么作用(前端基础什么是popstate事件)(2)

当然直接JavaScript代码也可以,调用历史对象的方法:

前端中tostring方法有什么作用(前端基础什么是popstate事件)(3)

欢迎关注

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页