利用history.pushState()实现页面无刷新更新
本来是在研究vue-router如何记录滚动位置,点返回的时候还是回到原来的位置,看到有人说的history.state存了一个值,才把history研究一下,发现 history.pushState()
可以实现无刷新的更新,还是非常棒的,
下面有我自己写的例子:
在 HTML 文件中, history.pushState()
方法向浏览器历史添加了一个状态。
pushState()
带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。下面将对这三个参数进行细致的检查:
state object — 状态对象是一个由 pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。(译者注:总而言之,它存储JSON字符串,可以用在popstate事件中。)state 对象可以是任何可以序列化的东西。由于 火狐 会将这些对象存储在用户的磁盘上,所以用户在重启浏览器之后这些state对象会恢复,我们施加一个最大640k 的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象,这个方法将扔出一个异常。如果你需要更多的空间,推荐使用sessionStorage或者localStorage。
title — 火狐浏览器现在已经忽略此参数,将来也许可能被使用。考虑到将来有可能的改变,传递一个空字符串是安全的做法。当然,你可以传递一个短标题给你要转变成的状态。(译者注:现在大多数浏览器不支持或者忽略这个参数,最好用null代替)
URL — 这个参数提供了新历史纪录的地址。请注意,浏览器在调用pushState()方法后不会去加载这个URL,但有可能在之后会这样做,比如用户重启浏览器之后。新的URL不一定要是绝对地址,如果它是相对的,它一定是相对于当前的URL。新URL必须和当前URL在同一个源下;否则,pushState() 将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL。
语法 history.pushState(state, title, url);
<div class="wrap">
<div onClick="jump('area=minhang')">跳转minhang</div>
<div onclick="jump('area=baoshan')">跳转baoshan</div>
<div onclick="jump('area=pudong')">跳转pudong</div>
<div onclick="jump('area=songjiang')">跳转songjiang</div>
</div>
<script type="text/javascript">
window.onload=function(){
var len = window.location.href.split('?')[1];
if(!len){
location.href=window.location.href+'?area=minhang';
}
}
function jump(param){
var title = "上海3月开盘项目汇总";
history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + param);
var current=window.location.href.split('?')[1];
switch (current)
{
case "area=minhang":
alert('1')
break;
case "area=baoshan":
alert('2')
break;
case "area=pudong":
alert('3')
break;
case "area=songjiang":
alert('4')
break;
}
}
</script>
关于history对象一个介绍比较好的文章(http://javascript.ruanyifeng.com/bom/history.html)
利用history.pushState()实现页面无刷新更新的更多相关文章
- HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新
AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- 页面无刷新Upload File
页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...
- JQuery 实现页面无刷新
对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...
- [转]jquery 点击表格变为input可以修改无刷新更新数据
原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...
- AjaxPro实现无刷新更新数据
使用AjaxPro实现无刷新更新数据 需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(J ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- Asp.net页面无刷新请求实现
Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...
- 浅谈页面无刷新技术ajax
现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...
随机推荐
- 小强学渲染之OpenGL状态机理解
状态机是理论上的一种机器,呃这个说法非常非常的抽象.通俗一点理解,状态机描述了一个对象在其生命周期内所经历的各种状态,状态间的转变,发生转变的动因,条件及转变中所执行的活动.或者说,状态机是一种行为, ...
- http://ctf.bugku.com/challenges#love:bugku--love
做了一道逆向题目,主要关联到base64编码的知识点.下面做一分析. 题目如下: 通过测试,可知它没有加壳.尝试使用IDA进行分析. 1.IDA分析文件 打开文件后,按[shift+F12 ...
- thu-learn-lib 开发小记(转)
原创:https://harrychen.xyz/2019/02/09/thu-learn-lib/ 今天是大年初五,原本计划出门玩,但是天气比较糟糕就放弃了.想到第一篇博客里面预告了要给thu-le ...
- CentOS 下用 Nginx 和 uwsgi 部署 flask 项目
前几天利用flask 写了几个调用salt-api 的接口,需要上线到正式环境,搜了一下 都是 用 nginx + uwsgi 来部署,这里记录下关键的配置项. 1.首先将代码上传到服务器上目录为: ...
- sqlserver 更新通过 select 查询出的结果集
update Babies set BirthOrder =tb.sn from Babies b1, (select ROW_NUMBER() over (partition by familyid ...
- 分布式协议学习笔记(三) Raft 选举自编写代码练习
由于时间安排上的原因,这次的代码写的稍微有些简略,只能算是自己对RAFT协议的一个巩固. 实现定义2个节点,使用读取配置文件来获取IP和端口以及节点ID 网络使用boost同步流程 一个线程收 一个线 ...
- 深入理解JVM(四)JVM性能监控与故障处理工具
4.2 JVM命令行工具 1.jps(JVM Process Status Tool):JVM进程查看工具,命令行进入到jdk的bin目录下,使用命令:jps -l/-q/-v/-m 2.jstat( ...
- tomcat的缺少tcnative-1.dll的解决
tomcat启动出现如下问题: The APR based Apache Tomcat Native library which allows optimal performance in produ ...
- error while loading shared libraries的解決方法
我是在启动nginx的时候报这个错误,搜索这个错误时发现这篇文章,非本人(小渡博客)原创. 原文地址:http://blog.csdn.net/dumeifang/article/details/29 ...
- VM下载安装
VM下载 VM是一款收费软件,要找有密钥的下载. 我的网盘 > 软件 > 常用电脑工具 > VM VM安装 参考链接中的安装步骤 http://blog.java1234.com/b ...