window.history.pushState()和window.history.replaceState()

今天在项目中遇到要实现修改地址栏但是页面不可以刷新的需求

查阅资料发现可以用window.history.pushState(state, title, url)和window.history.replaceState(state, title, url)

三个参数：

state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null或者空字符串。

title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址，不会检查url是否存在。

两者区别：

pushState()方法是在历史记录中增加一条新的记录，pushState()因为留下记录，所以可以回撤

replaceState()方法是将当前的历史记录给替换掉，不会在history中留下记录,因为未留下记录，所以无法返回

searchParams = `?keyword=${keyword}&pageNum=1&pageSize=10&type=${type}&courseType=${courseType}&subjectId=${subjectId}`
getSearch(searchParams)function getSearch(keyword) {history.pushState("", "", "./searchPage.html" + keyword);...
}

window.history.pushState()和window.history.replaceState()相关推荐

history`pushState和window`onpopstate实现tab切换效果
前言先来介绍一下history.pushState()和window.onpopstate history.pushState(),改变当前地址栏的路径,并不会更新页面内容用法:history.p ...
操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 一.历史记录前进与后退 1.后退: window.history.back() -- 相当于用户在浏 ...
Javascript history pushState onpopstate方法做AJAX SEO
参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://develop ...
阻止微信后退,阻止微信页面关闭 history.pushState 无刷新改变页面URL
阻页面后退防止页面关闭 <!DOCTYPE html> <html> <head><title>阻止微信后退按钮</title> < ...
window history pushState replaceState 跳转原理
一.pushState 比如,当前打开的界面是:https://developer.mozilla.org/en-US/docs/Web/API/History,如下图所示: 在chrome的cons ...
ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如 ...
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗跟搜索引擎搞基自己备忘精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
怎样监听history.pushState、history.replaceState事件
前言 SPA应用的核心是路由监听,一般有两种方式,其一是利用URL锚点并监听hashchange事件,其二就是利用history.pushState和history.replaceState两个API ...

window.history.pushState()和window.history.replaceState()

window.history.pushState()和window.history.replaceState()相关推荐

最新文章

热门文章