快速修改HTML5,HTML5无刷新修改URL(示例代码)

HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和后退,我们可以开始操作这个历史记录堆栈。

实例一、通过pushState修改URL

通过这句代码可以无刷新改变URL

window.history.pushState({},0,url);

DEMO代码:

截图:

7741ba9b94fb9df9129c88b49d726e51.png

在input输入框内输入haha.html点击“点击无刷新改变url”按钮即可实现

05fd7ffaeed2222141ae857332ffa175.png

实例二、利用ajax配合pushState翻页无刷新的动作

主要在ajax发起数据请求,在数据页面响应后利用pushState修改分页参数,达到模拟真实翻页效果,并且写入历史表达到后退时能恢复上一页的数据

demo-page.html代码:

shuju.php代码:

DEMO贴图:

284692ad7258c8eb055c3cdf6868e39c.png

没有点击之前

4af91c63006ce5d6c84ea83f8ab98836.png

点击后,发起ajax请求page=2数据

6fb7a8f0491e2ce5e21553f7deac98bc.png

ajax返回后通过pushState修改URL,请看截图地址栏已经是page=2,页面没有刷新,因为firebug控制台中的ajax请求记录还在

3b698773abf9f0f2956e4ad2c10a88c7.png

点击后退箭头,恢复上一页的数据

最后

虽说这两个html5新加api能实现无刷新修改URL,但js毕竟是前端,为了安全是不能跨域的。比如本例中的demo域是在www.qttc.net下,不能修改到www.xxx.com域下。有不少人说这个特性解决了ajax局部刷新区域不容易被蜘蛛人抓取的问题,本人没有亲自验证,但却有可行之势,感兴趣的童鞋可以尝试下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/302600.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

这一平台只要把握住风口期,自己就能当老板!

我是电商珠珠 短视频渐渐走进大家的视野,改变了大家的日常娱乐方式。从19年开始,抖音开始发展电商平台-抖音小店。 在改变大家娱乐方式的同时,还将直播电商的热度掀了起来,由此改变了大家的购物方式,给大家带来了方便…

如何用TensorFlow实现人工智能?

自 2015 年 11 月 9 号发布之后,TensorFlow 逐渐成为人工智能领域最广泛运用的深度学习框架。那么TensorFlow框架到底是什么?TensorFlow 是一个大规模机器学习的开源框架,提供了多种深度神经网络的支持。不仅 Google 在自己的产品线使用 Tens…

一不小心,知乎炸了!

阅读本文大概需要7分钟。昨天晚上加完班发完原创文章:如何成为一个搞垮公司的程序员?就准备回家了,突然发现知乎一堆咨询消息,看了看原来是之前回答的一个问题突然火了,就是这个:好家伙,一天不到…

[转载]Android Layout标签之-viewStub,requestFocus,merge,include

定义Android Layout(XML)时&#xff0c;有四个比较特别的标签是非常重要的&#xff0c;其中有三个是与资源复用有关&#xff0c;分别是<viewStub/>, <requestFocus />, <merge /> and<include />。可是以往我们所接触的案例或者官方文档的例子都没有着…

查询2021抚顺高考成绩,2021年抚顺高考状元是谁分数多少分,历年抚顺高考状元名单...

2020年抚顺一年一度的高考考试已经结束&#xff0c;今年抚顺高考状元是谁呢&#xff0c;抚顺高考状元出自哪个高中学校&#xff0c;文理科分数是多少分&#xff0c;一起来了解。一、2020年抚顺高考状元名单资料2020年抚顺高考状元名单和学校相关信息&#xff0c;截至目前发文时…

Android菜单详解——理解android中的Menu

前言 今天看了pro android 3中menu这一章&#xff0c;对Android的整个menu体系有了进一步的了解&#xff0c;故整理下笔记与大家分享。 PS&#xff1a;强烈推荐《Pro Android 3》&#xff0c;是我至今为止看到的最好的一本android书&#xff0c;中文版出到《精通Android 2》。 …

2021北京高考适应性测试成绩排名查询,2021届适应性考试学生成绩排名

1开启前照灯远光时仪表板上(如图所示)亮起。查看本题分析2在道路上跟车行驶时&#xff0c;跟车距离不是主要的&#xff0c;只须保持与前车相等的速度&#xff0c;即可防止发生追尾事故。查看本题分析3驾驶机动车在高速公路要按照限速标志标明的车速行驶。查看本题分析4这个标志…

.NET之Docker部署详细流程

开篇语自己从头开始走一遍docker部署.net的流程&#xff0c;作为一种学习总结&#xff0c;以及后续会写一些在该基础之上的文章。本次示例环境&#xff1a;vs2019、net5、docker、postman创建项目本次事例代码是用过vs2019创建的ASP.NET Core Web API项目image.png目标框架是.N…

平凡而又神奇的贝叶斯方法

全世界有3.14 % 的人已经关注了数据与算法之美概率论只不过是把常识用数学公式表达了出来。 ——拉普拉斯记得读本科的时候&#xff0c;最喜欢到城里的计算机书店里面去闲逛&#xff0c;一逛就是好几个小时&#xff1b;有一次&#xff0c;在书店看到一本…

d.ts文件可以注释html吗,如何编写一个d.ts文件的步骤详解_旧店_前端开发者

前言本文主要讲怎么写一个typescript的描述文件(以d.ts结尾的文件名&#xff0c;比如xxx.d.ts)。最近开始从之前也从网上面也找了一些资料&#xff0c;但还是看的云里雾里模糊不清&#xff0c;经过一段摸索&#xff0c;将摸索的结果记录下来&#xff0c;也希望可以给别人一个参…

function里面可以写function吗_氨基酸可以和蜂蜜一起喝吗?蜂蜜里面有氨基酸吗?...

氨基酸可以和蜂蜜一起喝吗?蜂蜜里面有氨基酸吗?氨基酸是我们人体不可或缺的营养物质&#xff0c;那氨基酸这种物质是否可以搭配蜂蜜一同食用?不少朋友都存在类似的疑惑&#xff0c;氨基酸会对蜂蜜产生不良的影响吗?其实&#xff0c;蜂蜜中本身也包含不少的氨基酸&#xff0…

通过Dapr实现一个简单的基于.net的微服务电商系统(九)——一步一步教你如何撸Dapr之OAuth2授权-百度版...

目录&#xff1a;一、通过Dapr实现一个简单的基于.net的微服务电商系统二、通过Dapr实现一个简单的基于.net的微服务电商系统(二)——通讯框架讲解三、通过Dapr实现一个简单的基于.net的微服务电商系统(三)——一步一步教你如何撸Dapr四、通过Dapr实现一个简单的基于.net的微服…

各自用一句话来概括MVC、MVP、MVVM的差异特点

MVC&#xff1a; 用户的请求首先会到达Controller&#xff0c;由Controller从Model获取数据&#xff0c;选择合适的View&#xff0c;把处理结果呈现到View上&#xff1b; MVP&#xff1a; 用户的请求首先会到达View&#xff0c;View传递请求到特定的Presenter&#xff0c;Pre…

不用“背”单词,1个方法牢记7000单词:我是如何做到的?

全世界有3.14 % 的人已经关注了数据与算法之美上个月30号&#xff0c;我怀着忐忑的心情&#xff0c;再次打开了 词汇量测试网站。当我看到词汇量达到7190的时候&#xff0c;非常兴奋。以至于带着怀疑的态度测了第二次&#xff1a;7260。7000的词汇量是怎样的一个程度呢&#xf…

VS2005~VS2022,那些年用过的VS,致敬,青春!

微软在开发者博客上宣布了一则重磅消息 —— 众所期待的 Visual Studio 2022 开发工具包即将全面拥抱 64-bit&#xff0c;并将于今夏推出首个公共预览版本。笔者第一次接触的VS版本还是2005&#xff0c;那时候还在上大三&#xff0c;一眨眼的功夫&#xff0c;现在都VS2022了&am…

Cowboy 源码分析(十八)

在上一篇中&#xff0c;我们整理了下cowboy_http_protocol:header/3函数&#xff0c;在文章的末尾留下2个没有讲到的函数&#xff0c;今天&#xff0c;我们先看下cowboy_http_protocol:error_terminate/2函数&#xff0c;另一个函数下一篇&#xff0c;我们再看。cowboy_http_pr…

符合语言习惯的 Python 优雅编程技巧

Python最大的优点之一就是语法简洁&#xff0c;好的代码就像伪代码一样&#xff0c;干净、整洁、一目了然。要写出 Pythonic&#xff08;优雅的、地道的、整洁的&#xff09;代码&#xff0c;需要多看多学大牛们写的代码&#xff0c;github 上有很多非常优秀的源代码值得阅读&a…

compress后的bytearray再decode变大_笔记本电脑风扇噪音变大的原因及其解决办法

笔记本使用时间长了之后&#xff0c;风扇声音会变大&#xff0c;那么如何再把风扇声音变小呢&#xff1f;怎么减小笔记本风扇的噪音&#xff1f;是什么原因导致笔记本风扇声音变大&#xff1f;下面给大家介绍笔记本风扇声音变大的原因及其解决办法。原因&#xff1a;1、使用时间…

ML.NET 示例:对象检测-ASP.NET Core Web和WPF桌面示例

ML.NET 版本API 类型状态应用程序类型数据类型场景机器学习任务算法v1.5.0动态API最新端到端应用图像文件对象检测深度学习ONNX: Tiny YOLOv2 & Custom Vision问题对象检测是计算机视觉中的经典问题之一&#xff1a;识别给定图像中包含哪些对象以及它们在图像中的位置。对于…

120天的烧脑只为孩子设计一套教具~

小木研究了适合儿童学习计算机知识的书真的挺多&#xff0c;但是小木要推荐的这本真的是很接地气了&#xff0c;不管是热衷于研究技术的小机灵还是一说计算机逻辑就懵的小可爱们&#xff0c;看到这本萌萌哒电脑漫游记&#xff0c;都会忍不住对计算机越来越感兴趣。它深入浅出&a…