后台返回整个html转换成页面链接,利用html5的history.replaceState修改当前页面的URL...

我们知道浏览器有一个history对象，用来保存浏览历史，用户可以通过点击浏览器的后退或前进按钮在历史记录中切换。之前对history的操作的API主要是前进、后退、跳转等，而在HTML5中提供了2个新方法来加强对history的管理。

history.pushState(state, title, url);

history.replaceState(state, title, url);

两个方法的参数是一样的。说明如下：

state：一个与指定历史记录相关联的状态对象，当popstate事件触发时，会把该对象传入回调函数。如果不需要用到，可以传null。

title：页面的标题。但当前大多数浏览器都不支持或忽略这个值。可以传null。

url：添加或修改的history的网址。为了安全性，必须保持与当前URL同一个域。

顾名思义，两个方法的区别只是pushState添加一个最新的历史记录，而replaceState则是把当前的页面的历史记录替换掉。他们最大的特点是添加或替换历史记录后，浏览器地址栏会变成你传的地址，而页面并不会重新载入或跳转。

例如，假设当前的页面地址是example.com/1.html，且history中此时只有一条当前页面的记录。

当你执行 history.pushState(null, null, “2.html”)后，浏览器的地址栏会显示example.com/2.html，但并不会跳转到2.html，甚至并不会去检查2.html存不存在，只是加入一个最新的历史记录项。此时history中会有两个记录。假如你此时点击页面上的link跳转到另外一个页面后，点击浏览器的后退按钮，则url会变成example.com/2.html，如果此前的1.html的页面浏览器有缓存的话会显示1.html的内容，否则会发起请求example.com/2.html。如果再次点后退，url会变成example.com/1.html。

而如果执行 history.replaceState(null, null, “2.html”)的话，浏览器的地址栏也会显示example.com/2.html，区别是history中只有当前2.html的记录，而1.html的记录已被替换掉。

利用这些特性，可以用来修改当前页面的URL来达成某些目的，比如可以用来记住搜索条件。

如果页面是数据展示的页面，页面上有一些搜索或过滤的条件，当用户点击这些条件时，页面通过AJAX把结果呈现到页面上，当点击某个结果页面跳转到下一个页面后，用户点击浏览器的后退按钮回到前一个页面后，即使页面有缓存，AJAX获取的结果也不会保留在页面上。如果后退后，需要记住此前的搜索条件和结果，可以在用户点击搜索条件时，把搜索条件利用history.replaceState添加到页面的query string中。

if (history.replaceState) {

history.replaceState(condition, null, "?" + $.param(condition, true));

}

页面可以设置成no-cache，当用户后退时，浏览器会重新请求带搜索条件的URL，后台根据搜索条件，把对应的结果页面呈现出来，从而达到记住搜索条件和结果的目的。

后台返回整个html转换成页面链接,利用html5的history.replaceState修改当前页面的URL...相关推荐

Jquery 将后台返回的字符串转换成Json格式的数据
//code by:博客园-曹永思第一步:将DataTable转换成 Json格式的数据方法一 View Code /// <summary>/// DataTable转成Json格 ...
微信支付域名与后台配置不一致当前页面的URL未注册
在对接微信时,经常遇到这两个问题. redirect_uri域名与后台配置不一致这通常发生在网页授权为了获取openid,首先请求https://open.weixin.qq.com/connec ...
将数据库返回的ResultSett转换成List装Map形式的方法（ResultSetToList）
多时候想做一些关于数据库实验,如果先搭建框架太麻烦,直接得到ResultSet处理起来取值什么的也很繁琐,为此我做了一个将ResultSet转换成List<Map<String,Objec ...
如何将2000kbps的mp4视频转换成30000kbps的视频？视频比特率如何修改？
好多人在想把上传到某些网站或者平台的时候,有一些网站对视频的体积是有要求的.但是所以就需要对视频的体积进行修改,在修改视频体积之前我们必须要清楚一件事,就是什么参数影响视频的体积,在我看来就是视频的清 ...
php当前页面删除处理,php删除记录同时刷新当前页面的实现代码
要求实现: 1.在页面上显示查询数据,点击"删除",删除掉数据,同时刷新当前页面. 2.GET方式获得删除条件. 1.数据库连接变量 connectvars.php //服务器 d ...
vue中使用类似html中a标签的锚链接，实现点击定位到当前页面的某个位置
在vue中实现点击文字,定位到当前页面的某个位置,具体实现效果如下图所示: 主要实现方式为: <div @click="toJump1">定位1</div> ...
php mailto,PHP将电子邮件地址转换成mailto:链接形式，防止采集
现在很多垃圾邮件程序会自动采集网上的email地址,然后成为发送垃圾邮件对象,为了避免成为被"攻击"的对象,我们可通过以下函数来转换Emai地址为隐藏链接,也就是把直白的Email ...
本地图片转换成网络链接图片
有时候我们需要将几张图片生成链接或者二维码,方便进行各种场景的展示和分享.因为链接是可以在各种设备和系统打开的.比如微信好友或朋友圈发一些类似H5页面的链接,类似于公众号一样自带缩略图和简介的小方格. ...
怎样将本地图片转换成网络链接图片
第一步:打开浏览器在地址栏输入https://sm.ms/ 第二步,单击browse,选择需要转换的本地图片,然后单击"打开" 第三步:单击上传就ok了我们就会看到生成的url链 ...

后台返回整个html转换成页面链接,利用html5的history.replaceState修改当前页面的URL...

后台返回整个html转换成页面链接,利用html5的history.replaceState修改当前页面的URL...相关推荐

最新文章

热门文章