【js/css】pushState和popState简明教程

2024-05-16 23:09:34

pushState和replaceState

h5中提供了只修改地址栏、不修改页面内容的api:

pushState(添加浏览历史),
replaceState(修改当前浏览历史)，

popState事件在用户返回或前进进会被出发触发
history.pushState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
history.replaceState方法跟pushState一样只不过replaceState是修改当前的状态

popState的触发

仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
此事件可以添加一个回调函数，函数的第一个参数为事件,事件的state属性是pushState和replaceState中传递的第一个参数state
判断浏览器是否支持这些api,并添加一些记录,如下添加三个

        history.pushState('#1', null, '#1');history.pushState({ a: 1, b: 2 }, null, '#2');history.pushState('#3', null, '#3');window.onpopstate = function(event) {console.log('location: ' + document.location);console.log(event.state);};//另一种添加事件的方法window.addEventListener('popstate', function(event) {console.log('location: ' + document.location);console.log(event.state);});history.go(-1)//触发popstate

输出：

location: http://127.0.0.1:5501/30-dispatchEvent.html#2
{a: 1, b: 2}

在这里pushState和popState才建立了联系，popState存储了pushSatte的state备份，在事件里的state里放着

【js/css】pushState和popState简明教程相关推荐

【从零入门 Web 前端】HTML5 + CSS 简明教程
HTML + CSS 就是当代网页的基石.全世界的网站,无论其服务器端的语言是什么,前端都使用了 HTML + CSS. 随着互联网行业的快速发展,前端这一职位也越来越火热,前端工程师的高薪资,也让越 ...
director.js：客户端的路由---简明中文教程
1.引子最近学用director.js,那是相当的简单易学易使用.不过开始学的时候,搜搜过后,却没有发现相关的中文教程.于是决定硬啃E文,翻译备用的同时也当是给自己上课并加深对它的理解. direc ...
Linux/Unix系统下nginx+php安装简明教程
本文转载自Linux/Unix系统下nginx+php安装简明教程,请保留转载信息~ 一.安装nginx: 1. 安装pcre库,nginx的rewrite模板需用到pcre库: mkdir -p / ...
CSDN Markdown简明教程3-表格和公式
0. 目录目录前言表格 1 表格 2 表格对齐方式公式 1 行内公式 2 陈列公式displayed formulas 3 MathJax语法深入声明 1. 前言 Markdown是一种轻 ...
HijackThis反浏览器劫持软件－－简明教程
近来很多网友由于误点不良网址,导致IE主页被改成英文搜索页或其它恶意网页,通常的方法诸如修改注册表.用上网助手或杀毒软件等是不能解决的,修改注册表,一点刷新就会恢复成原样,用上网助手等软件修复要么是根 ...
python简明教程word版-计算机开放电子书归档 2018
97 Things Every Programmer Should Know A Java Reference (UCB CS61b Textbook) AI Cheat Sheet Advanced ...
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
EasyJWeb－Velocity脚本简明教程
EasyJWeb-Velocity脚本简明教程 (pdf版) 很多人下载了EasyJWeb的开源应用示例,但是对动态页面模板文件中的标签使用不是很熟悉,这里简单介绍一下.EasyJWeb特定把视图限定 ...
[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

最新文章

热门文章