js修改地址栏url_前端实战总结如何在不刷新页面的情况下改变URL
由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上,这样我们就可以直接通过复制url来显示对应的界面数据了。
背景介绍
由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现,这种请求操作并不会触发浏览器url的变化,这样虽然也能正常请求数据并渲染到页面,但是如果用户在当前页面操作了某个get请求并得到了某条数据,想通过链接将当前看到的界面分享给其他人时,那么此时浏览器url并不会变化,通过链接只能访问到初始化的数据界面,此时并不能达到理想的效果。如下图所示:
(单纯使用ajax或者fetch实现get请求时)
当我们在该页面将列表切换到第二页时,浏览器url并没有变化,所以将链接复制给其他人打开并不会将列表结果切换到第二页,而是重新初始化。
实现过程
通过以上的背景和问题,我们可以想想可以怎么实现呢?我的第一个反应就是使用location API来实现,我们可以使用location.search来读写浏览器query参数:
location.search = '?page=2';
这段代码虽然可以改变浏览器url,如下图所示:
但会出现一个性能问题,就是当我们执行了以上代码后,整个浏览器都会刷新,导致我们不想刷新的部分也刷新了,那我们有办法可以让它局部刷新吗?答案是必须有。
这里就要引出我们本文的重点:history API。
history API
Window.history是一个只读属性,用来获取History 对象的引用,History 对象提供了操作浏览器会话历史(浏览器地址栏中访问的页面,以及当前页面中通过框架加载的页面)的接口。HTML5引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。
使用 history.pushState() 可以改变referrer,它在用户发送 XMLHttpRequest 请求时在HTTP头部使用,改变state后创建的 XMLHttpRequest 对象的referrer都会被改变。因为referrer是标识创建 XMLHttpRequest 对象时 this 所代表的window对象中document的URL。
那么我们就可以使用pushState来实现我们的更新浏览器url功能了。
pushState() 方法
pushState() 需要三个参数: 一个状态对象, 一个标题 (目前已忽略), 和 (可选的) 一个URL:
状态对象 — 状态对象state是一个JavaScript对象,通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态,popstate事件就会被触发,且该事件的state属性包含该历史记录条目状态对象的副
标题 — Firefox 目前忽略这个参数,但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者,你可以为跳转的state传递一个短标
URL — 该参数定义了新的历史URL记录。注意,调用 pushState() 后浏览器并不会立即加载这个URL,但可能会在稍后某些情况下加载这个URL,比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径,那么它将被作为相对于当前URL处理。新URL必须与当前URL同源,否则 pushState() 会抛出一个异常。该参数是可选的,缺省为当前UR
实现
/** * 设置浏览器url * params:queryObj(参数对象)*/function setBrowserUrl(queryObj){// stringify是queryString的一个api,具体可以查看node官网,也可以自己实现var url = `${location.pathname}?${stringify(queryObj)}` history.pushState({url: url}, '', url)}
这样我们就可以在请求的同时,调用setBrowserUrl方法来改变浏览器url了。接下来我们就可以监听浏览器url的变化,如果浏览器url有需要的请求参数,那么我们就根据请求参数来请求数据,没有就初始化页面,这样当我们查看某条记录或者某个小秘密时,想把该数据保存下来并分享给被人,是不是就可以实现了呢?
总结
基于H5 history可以实现很多优雅使用的工具,比如路由,缓存控件等等。
如果想了解更多webpack,gulp,css3,javascript,nodeJS,canvas等前端知识和实战,欢迎在公众号《趣谈前端》加入我们一起学习讨论,共同探索前端的边界。
知识汇总系列推荐
web性能优化的15条实用技巧
前端必不可少的Git使用技巧
《javascript高级程序设计》核心知识总结
前端开发中不可忽视的知识点汇总(一)
- css3实战汇总(附源码)
让你瞬间提高工作效率的常用js函数汇总(持续更新)
欢迎关注下方公众号,获取更多前端知识精粹和加入学习社群:
回复 Webpack,可获得 用webpack4.0撸单页/多页脚手架思维导图回复 lodash,将获得 本人亲自翻译的lodash API中文思维导图回复 学习路径,将获取 笔者多年从业经验的前端学习路径的思维导图
趣谈前端
Vue、React、小程序、Node
前端 算法|性能|架构|安全
js修改地址栏url_前端实战总结如何在不刷新页面的情况下改变URL相关推荐
- 前端如何实现:在不刷新页面的情况下实时看到自己的评论
功能描述 1.类似CSDN论坛 右上角的消息通知 如果有新消息 整个页面不刷新 右上角的消息数字即时+1 2.类似于论坛评论区 ,发布评论之后,不刷新页面就可以立刻看到自己的评论 (2020-5-3更 ...
- js修改地址栏url_在gulp、create-react-app中css,js中的文件路径
我们的项目HTML文件单独放在一个服务器上,静态资源js.css.images放在我们的静态资源服务器上,这样部署后会出现一个问题,css文件中的图片相对路径,在html的服务器上就会变成 //htm ...
- js修改地址栏url_不同寻常的地址栏过渡
前几天,我在推特上看到这样一张图. 原来地址栏还能这么玩,瞬间就觉得自己弱爆了.然后我决定去实现一下这个效果,然后做成一个库. 画了一个晚上,终于做好了.这是最后的成果. 这个库使用非常的简单. 你只 ...
- 如何在不重新加载页面的情况下修改URL?
有没有一种方法可以修改当前页面的URL而无需重新加载页面? 如果可能,我想访问#哈希之前的部分. 我只需要更改域后的部分,所以就好像我没有违反跨域策略一样. window.location.href ...
- 分布式协议与算法实战——拜占庭将军问题:有叛徒的情况下,如何才能达成共识?(笔记)
拜占庭将军问题(The Byzantine Generals Problem),其实是借拜占庭将军的故事展现了分布式共识问题,还探讨和论证了解决的办法.实际上,它是分布式领域最复杂的一个容错模型,一旦 ...
- 前端开发者:如何在没有UI设计图的情况下做出更好的前端页面
作为一名前端开发者,你肯定知道UI设计图在前端开发过程中的重要性.它是一个指导你如何构建前端页面的重要参考,但在一些小型的项目或者自己想做一个完整的网站玩一下时,你可能没有UI设计图.此时该如何做出优 ...
- 前端笔记-vue中使用router进行页面跳转及除掉url中的#
目录 演示 代码 演示 运行截图如下: 点击后,url跳转如下: 代码 页面跳转的关键 程序结构如下: aaa.vue <template><div>我是aaa<butt ...
- 015、JVM实战总结:大厂面试题:什么情况下JVM内存中的一个对象会被垃圾回收?
1.什么时候会触发垃圾回收? 新生代放不下了 2.被哪些变量引用的对象不能回收? 对象被方法的局部变量.类的静态变量给引用了,就不会回收他们. 可达性分析算法来判定哪些对象是可以被回收的.算法的思想: ...
- 前端学习(2591):刷新页面vuex消失
- 前端复盘: knockout + require + director 构建单页面程序
关注并将「趣谈前端」设为星标 每早08:30按时推送技术干货/优秀开源/技术思维 目前react,vue,angular等框架都支持单页面程序,最近在回顾一些知识,想起刚毕业的时候接触到knockou ...
最新文章
- React 深入系列3:Props 和 State
- 5.Ubuntu下的GIF录制软件peek安装
- Linux的IPC机制(一):共享内存
- Hlink的Analysis基本搞定了
- PyCharm 查找文件名
- 让PHP更快的提供文件下载
- Redis简介及配置文件介绍
- Java基础:请求重定向与请求转发的比较
- java程序中单方法接口通常是,Java基础知识整理
- 新人如何聪明的学习计算机网络
- python基础知识2——基本的数据类型——整型,长整型,浮点型,字符串
- ElementUI:tree组件背景色、鼠标hover悬浮背景色、选中背景色修改
- 一天一种设计模式之七-----装饰模式
- 计算机设计大赛答辩ppt
- Arduino Uno + HMC5883L电子罗盘 实验
- Axure 获取焦点
- 11大Java开源中文分词器的使用方法和分词效果对比,当前几个主要的Lucene中文分词器的比较...
- 从物理意义上了解PCA
- cshop是什么开发语言_Fecshop 多语言
- Android混淆心得
热门文章
- snmp服务配置及其oid、mib文件解析
- 总结一下linux中的分段机制
- Linux内核多线程——补充(各种平台下的多线程)
- H264--1--编码原理以及I帧B帧P帧、ptsdts
- 4083. 最大公约数
- vim批量删除与插入
- ubuntu需要多大的固态硬盘_揭秘:为什么SSD固态会越用越慢?关键点就在这里,你了解了吗...
- visio从mysql导入_Visio 怎么从Excel、SQL、SharePoint和其他外部源导入数据?
- getAttribute实例例java,Java AttributedCharacterIterator.getAttribute方法代码示例
- mysql自学完整_MySQL自学篇_MySQL