《前端实战总结》如何在不刷新页面的情况下改变URL

徐小夕 等级 354 0 0

由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上,这样我们就可以直接通过复制url来显示对应的界面数据了。

背景介绍

由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现,这种请求操作并不会触发浏览器url的变化,这样虽然也能正常请求数据并渲染到页面,但是如果用户在当前页面操作了某个get请求并得到了某条数据,想通过链接将当前看到的界面分享给其他人时,那么此时浏览器url并不会变化,通过链接只能访问到初始化的数据界面,此时并不能达到理想的效果。如下图所示:

《前端实战总结》如何在不刷新页面的情况下改变URL

(单纯使用ajax或者fetch实现get请求时)
当我们在该页面将列表切换到第二页时,浏览器url并没有变化,所以将链接复制给其他人打开并不会将列表结果切换到第二页,而是重新初始化。

实现过程

通过以上的背景和问题,我们可以想想可以怎么实现呢?我的第一个反应就是使用location API来实现,我们可以使用location.search来读写浏览器query参数:

location.search = '?page=2';

这段代码虽然可以改变浏览器url,如下图所示:

《前端实战总结》如何在不刷新页面的情况下改变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() 会抛出一个异常。该参数是可选的,缺省为当前URL

实现

/**
 * 设置浏览器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等前端知识和实战,欢迎在公众号《趣谈前端》加入我们一起学习讨论,共同探索前端的边界。

《前端实战总结》如何在不刷新页面的情况下改变URL

更多推荐

收藏
评论区

相关推荐

《前端实战总结》如何在不刷新页面的情况下改变URL
由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上,这样我们就可以直接通过复制url来显示对应的界面数据了。 背景介绍 由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现,这种请求操作并不会触发浏览器url的变化,这样虽然也能正常请求数据并渲染到页面,但是如果用户在当前页面操作了某个get请求并得到了某条数据,想
工作问题记录总结2021--1
1 问题:在ios设备,怎么判断玩家是从通过浏览器进入,还是通过主屏幕点击进来的? 解决方法:(不刷新页面,但是改变页面的url地址) 1 用户在第一次使用浏览器进入的时候,给url地址添加标记, 2 当用户添加到主屏幕的时候,就多了标记 3 网页打开的时候,判断是否有这个标记,如果有这个标记,就是通过主屏幕进入,如果没有这个标记,就是通过浏览器进入 主
微信小程序验证url地址
笔记类 var that this that.optional()是验证是否为空方法 url(value) { return that.optional(value) || /^(?:(?:(?:https?|ftp):)?//)(?:S(?::S)?@)?(?:
Retrofit 动态修改BaseUrl 操作
开发中会遇到URL需要动态切换,若你还是通过gradle打包切换是否不太灵活,下面将介绍一下retrofit基于OKhttp中动态修改URL; 原理添加拦截器,在retrofit中的现实更加灵活了如下代码: language private RetrofitUrlManager() { if (DEPENDENCY_OKHTT
在浏览器输入 URL到页面展示中间发生了什么?
这个问题是前端的经典问题,从这个问题出发我们可以从根本上了解如何解决性能优化问题 首先我们可以在开头大概了解下在浏览器输入 URL到页面展示,中间有哪些步骤: 用户从浏览器进程里输入请求信息 网络发起 URL 请求 服务器响应 URL 请求之后,浏览器进程就要开始准备渲染进程了 渲染进程准备好之后,需要先向渲染进程提交页面数据,我
js 惰性载入函数( 能力检测 )
今天在做项目时,需要对地址栏参数做处理,于是便作了如下处理 javascript getUrlParam() { let params {}; const url window.location.href.replace(/\//g,'').replace(/\?/g,'&'); url.replace(/?&(^&)
问题 first path segment in URL cannot contain colon 的解决方案
目录问题解决 问题使用Golang开发流媒体服务器处理Post请求时,遇到了这个报错信息:2020/12/14 07:21:01 callback post failed2020/12/14 07:21:01 error::8080/api/callback: first path segment in URL cannot contain col
Golang根据URL判断媒体协议
目录问题解决 问题如何根据一个流媒体地址URL判断对应的流媒体协议,比如RTMP、RTSP协议等。 解决这里提供一个方法,可以直接拿来用。 golang func getProtocol(url string) (string, error) { if url "" { index : strings.Index(url, ":")
mock 请求分发
首发于 <a name"vqeCn"</a 背景是这样的我们公司的后管项目走的不是 resful 风格的 api,而是走后管网关,后管网关会将请求进行分发,具体怎么分发,有这么以下几点: 请求全部走 POST 请求 URL 统一为 /agrs 数据提交方式为 application/json 数据格式大致分为: 系统报文头
升级dubbo,小心default.version
上周遇到个关于升级dubbo 2.6 到2.7的兼容性问题,差点造成线上故障,这里记录下,也给大家提个醒。 问题回放有一个接口的提供方(dubbo 2.6.6)这么配置接口的版本号xml<dubbo:provider version"1.0.0"/消费方(也是dubbo 2.6.6)的reference这么配置xml<dubbo:
一次搞懂-JavaScript之异步编程
前言异步,就是非同步....这节内容可能会有点枯燥,但是却是 JavaScript 中非常重要的概念,非常有必要去学习。 目的 提升开发效率,编写易维护的代码 引子问题 请求时候为什么页面卡死??js$.ajax( url: "www.xx.com/api", async: false, // true success: function(result
你要的几个JS实用工具函数(持续更新)
今天,我们来总结下我们平常使用的工具函数,希望对大家有用。1、封装fetch「源码:」/   封装fetch函数,用Promise做回调   @type get: (function()), post: (function(, ))  / const fetchUtil       get: (url)           return new 
从输入URL到页面渲染完成
从输入URL到页面渲染完成涉及网络、浏览器工作原理等知识。 前序知识 浏览器进程结构textBrowser进程 负责协调、主控,包括地址栏、书签、历史栈。GPU进程 负责整个浏览器界面的渲染网络进程 负责发起接收网络请求插件进程 控制网页中使用到的插件 如flash 渲染器进程 默认使用(Processpersiteinstance)模式 四种
分别用python2和python3伪装浏览器爬取网页内容
python网页抓取功能非常强大,使用urllib或者urllib2可以很轻松的抓取网页内容。但是很多时候我们要注意,可能很多网站都设置了防采集功能,不是那么轻松就能抓取到想要的内容。今天我来分享下载python2和python3中都是如何来模拟浏览器来跳过屏蔽进行抓取的。最基础的抓取:! /usr/bin/env python codingutf8 @Au
爬虫进阶 - 前后端分离有什么了不起,过程超详细
这是一个详细的爬虫进阶教程,里面包含了很详细的思考和试错过程,如果你对学爬虫是认真的,建议认真看。 我们要抓取下面这个网站上的所有图书列表: https://www.epubit.com/books 1) 探索研究 创建一个新的python文件,写入如下代码:import requests url  'https://www.epubit.com/boo