本来是在研究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()实现页面无刷新更新的更多相关文章

  1. HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新

    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...

  2. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  3. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

  4. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  5. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  6. AjaxPro实现无刷新更新数据

    使用AjaxPro实现无刷新更新数据 需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(J ...

  7. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  8. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  9. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

随机推荐

  1. 小强学渲染之OpenGL状态机理解

    状态机是理论上的一种机器,呃这个说法非常非常的抽象.通俗一点理解,状态机描述了一个对象在其生命周期内所经历的各种状态,状态间的转变,发生转变的动因,条件及转变中所执行的活动.或者说,状态机是一种行为, ...

  2. http://ctf.bugku.com/challenges#love:bugku--love

      做了一道逆向题目,主要关联到base64编码的知识点.下面做一分析. 题目如下:   通过测试,可知它没有加壳.尝试使用IDA进行分析. 1.IDA分析文件   打开文件后,按[shift+F12 ...

  3. thu-learn-lib 开发小记(转)

    原创:https://harrychen.xyz/2019/02/09/thu-learn-lib/ 今天是大年初五,原本计划出门玩,但是天气比较糟糕就放弃了.想到第一篇博客里面预告了要给thu-le ...

  4. CentOS 下用 Nginx 和 uwsgi 部署 flask 项目

    前几天利用flask 写了几个调用salt-api 的接口,需要上线到正式环境,搜了一下 都是 用 nginx + uwsgi 来部署,这里记录下关键的配置项. 1.首先将代码上传到服务器上目录为: ...

  5. sqlserver 更新通过 select 查询出的结果集

    update Babies set BirthOrder =tb.sn from Babies b1, (select ROW_NUMBER() over (partition by familyid ...

  6. 分布式协议学习笔记(三) Raft 选举自编写代码练习

    由于时间安排上的原因,这次的代码写的稍微有些简略,只能算是自己对RAFT协议的一个巩固. 实现定义2个节点,使用读取配置文件来获取IP和端口以及节点ID 网络使用boost同步流程 一个线程收 一个线 ...

  7. 深入理解JVM(四)JVM性能监控与故障处理工具

    4.2 JVM命令行工具 1.jps(JVM Process Status Tool):JVM进程查看工具,命令行进入到jdk的bin目录下,使用命令:jps -l/-q/-v/-m 2.jstat( ...

  8. tomcat的缺少tcnative-1.dll的解决

    tomcat启动出现如下问题: The APR based Apache Tomcat Native library which allows optimal performance in produ ...

  9. error while loading shared libraries的解決方法

    我是在启动nginx的时候报这个错误,搜索这个错误时发现这篇文章,非本人(小渡博客)原创. 原文地址:http://blog.csdn.net/dumeifang/article/details/29 ...

  10. VM下载安装

    VM下载 VM是一款收费软件,要找有密钥的下载. 我的网盘 > 软件 > 常用电脑工具 > VM VM安装 参考链接中的安装步骤 http://blog.java1234.com/b ...