HTML5实现无刷新修改URL的方法


Posted in HTML / CSS onNovember 14, 2019

前言

今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的。

我尝试了俩种方式来修改url:

  • window.location.href,拼接一个搜索的key值,点击搜索的同时,刷新了页面,url改变了,功能是实现了,可是bug来了...,搜索页面闪烁后才进入结果页,而结合不跳转页面就不会发生闪烁的情况,所以当页面刷新时,vue实例都会被重新加载。
  • window.location.hash,url中#为网页中的一个位置,当读取此url时,页面会自动滚动到锚点处。这种方法不会向服务器发送请求,也不会重载页面。可读写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。

新增API

百度后发现HTML5为window.history对象引入了两个新的api是history.pushState()history.replaceState()方法,它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate事件配合使用。两种api都能改变当前的url,不同的是,pushState在浏览器中创建一条新的历史记录,而history.replaceState仅仅替换当前地址为指定url。

HTML5 新增的历史记录 API 均可以实现无刷新更改地址栏链接,配合 AJAX 完全可以做到无刷新跳转。他们的作用非常大,可以做到改变网址却不需要刷新页面,这个特性后来用到了单页面应用中比如:vue-router,react-router-dom里面。那么下面介绍新API的使用方法

pushState方法

上面提到的这套 API 提供一种「人为操纵」浏览器历史记录的方法。

我们可以将浏览器历史记录可以看作一个「栈」。栈是一种后进先出的结构,可以把它想象成一摞盘子,用户每点开一个新网页,都会在上面加一个新盘子,叫「入栈」。用户每次点击「后退」按钮都会取走最上面的那个盘子,叫做「出栈」。而每次浏览器显示的自然是最顶端的盘子的内容。

语法:window.history.pushState(state, title, url);

执行pushState函数之后,会往浏览器的历史记录中创建一条新记录,同时改变地址栏的地址内容。它可以接收三个参数,按语法顺序分别为:

  • 一个state对象或者字符串,用于描述新记录的一些特性。这个参数会被一并添加到历史记录中,以供以后使用。这个参数是开发者根据自己的需要自由给出的。该值是后期可以通过history.state;获取当前页面的参数,
  • 一个字符串,代表新页面的标题。当前基本上所有浏览器都会忽略这个参数。
  • 一个字符串,代表新页面的相对地址。(必须与当前页面处在同一个域。)

简单例子:假设当前页面为renfei.org/,打开控制台执行下面的 JavaScript 语句:

window.history.pushState({id: 1,name: "profile1"}, "My Profile", "/profile/");  //第一二参数可忽略设置为null

之后,地址栏的地址就会变成renfei.org/profile/,但同时浏览器不会刷新页面,甚至不会检测目标页面是否存在。

replaceState方法

有时,你希望不添加一个新记录,而是替换当前的记录,俩者区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。

replaceState和pushState原理一样使用也一样,最常用的方法:

window.history.replaceState({id: 1,name: "profile"},'下载','download?id=1');

特点:replaceState不会加入到历史记录里面,用history.go(-1)会跳过当前页面相当于是history.go(-2)。

popstate事件

当页面加载时,它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载,页面将收到onload事件,但不会有popstate事件。然而,如果你读取history.state属性,将在popstate事件发生后得到这个state对象

var currentState = history.state; //得到当前页面设置的history.pushState的state对象参数值

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。

例子:假设当前页面地址是http://example.com/index.html

window.onpopstate = function(event) {
  alert("location: " + document.location.href + ", state: " + JSON.stringify(event.state));//拿到history.state对象值
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=100");    //添加并激活一个历史记录条目 http://example.com/index.html?page=100,条目索引为1    //history.state为{page: 1}
history.pushState({page: 2}, "title 2", "?page=200");    //添加并激活一个历史记录条目 http://example.com/index.html?page=200,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=300"); //修改当前所在页面激活的历史记录条目 http://ex..?page=200 变为 http://ex..?page=300,条目索引为3

history.back(); // 弹出 "location: http://example.com/index.html?page=100, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/index.html, state: null
history.go(2);  // 弹出 "location: http://example.com/index.html?page=300, state: {"page":3}

pushState方法与设置hash值的区别

在某种意义上,调用 pushState() 与 设置 window.location = "#foo" 类似,二者都会在当前页面创建并激活新的历史记录。但 pushState() 具有如下几条优点:

新的 URL 可以是与当前URL同源的任意URL 。而设置 window.location 仅当你只修改了哈希值时才保持同一个文件。如果需要,可以不必改变URL就能创建一条历史记录。而设置 window.location.hash = "#foo";只有在当前哈希不是 #foo 的情况下, 才会创建一个新的历史记录项。我们可以为新的历史记录项关联任意数据。而基于哈希值的方式,则必须将所有相关数据编码到一个短字符串里。

需要注意的是通过history.pushState修改网页的URL地址,在配合相关代码显示隐藏相应界面便可以实现单页面多界面相互操作。该方法比直接访问URL地址速度快,执行效率高,UI体验好,但会增加页面的复杂性及耦合性,要视实际情况而定,一般都用在dialog弹出框上。

应用:全站 AJAX,并使浏览器能够抓取 AJAX 页面

这个可以干啥用?一个比较常用的场景就是,配合 AJAX。

假设一个页面左侧是若干导航链接,右侧是内容,同时导航时只有右侧的内容需要更新,那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。但是如果仅仅这样,地址栏是不会改变的,用户无法前进、后退,也无法收藏当前页面或者把当前页面分享给他人;搜索引擎抓取也有困难。这时,就可以使用 HTML5 的 History API 来解决这个问题。

思路:首先绑定click事件。当用户点击一个链接时,通过preventDefault函数防止默认的行为(页面跳转),同时读取链接的地址(如果有 jQuery,可以写成$(this).attr('href')),把这个地址通过pushState塞入浏览器历史记录中,再利用 AJAX 技术拉取(如果有 jQuery,可以使用$.get方法)这个地址中真正的内容,同时替换当前网页的内容。

为了处理用户前进、后退,我们监听popstate事件。当用户点击前进或后退按钮时,浏览器地址自动被转换成相应的地址,同时popstate事件发生。在事件处理函数中,我们根据当前的地址抓取相应的内容,然后利用 AJAX 拉取这个地址的真正内容,呈现,即可。

最后,整个过程是不会改变页面标题的,可以通过直接对document.title赋值来更改页面标题。

总结

以上所述是小编给大家介绍的HTML5实现无刷新修改URL的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
iframe跨域的几种常用方法
Nov 11 #HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 #HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 #HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 #HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 #HTML / CSS
跨域修改iframe页面内容详解
Oct 31 #HTML / CSS
html如何对span设置宽度
Oct 30 #HTML / CSS
You might like
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
跟老齐学Python之用while来循环
2014/10/02 Python
python开发之for循环操作实例详解
2015/11/12 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
浅析python函数式编程
2020/09/26 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
浪费资源的建议书
2014/03/12 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript