专栏首页程序生涯ajax无刷新页面切换,历史记录后退前进解决方案

ajax无刷新页面切换,历史记录后退前进解决方案

问题描述

我们在工作中常常遇到需要用ajax来显示下一页和上一页,ajax可以不刷新页面进行操作!但是,假如你想通过浏览器的历史记录返回上一页和下一页。那么ajax默认是做不到的!一般需求要历史返回的时候,我们通常不使用ajax。但是呢,假如一个页面中,只有一个地方是需要动态的上一页下一页,其他地方都是固定的,那么这种情况除了使用模板之外,我们使用ajax来操作显得格外方便!那么如何解决ajax历史记录的返回和前进呢?今天我们就一起来学习一下!

js中history相关API普及 首先我们来看看history相关的API。

history.state 当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。

history.pushState(state, title, url) 将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。

state:与要跳转到的URL对应的状态信息。
 
title:页面的题目,假如没有就穿空字符串就可以。
 
url:要跳转到的URL地址,不能跨域。

history.replaceState

用新的state和URL替换当前。不会造成页面刷新。

state:与要跳转到的URL对应的状态信息。
 
title:页面的题目,假如没有就穿空字符串就可以。
 
url:要跳转到的URL地址,不能跨域。

window.onpopstate

history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。 支持性判断

if ('pushState' in history) {...}

相关代码

假如我们动态的html代码id是haorooms。

定义如下函数

function processAjaxData(obj, url){
     document.getElementById("haorooms").innerHTML = obj.html;
     document.title = obj.pageTitle;
     window.history.pushState({"html":obj.html,"pageTitle":obj.pageTitle},"", url);
 }

obj是后台ajax返回来的数据,obj.html来替换动态haorooms下面的内容,页面标题是返回的pageTitle标题。

而当有浏览者点击浏览器“后退”或“前进”按钮时,我们用下面的代码来响应用户的操作:

window.onpopstate = function(event){
    if(event.state){
        document.getElementById("haorooms").innerHTML = event.state.html;
        document.title = event.state.pageTitle;
    }
};

兼容性

谷歌浏览器,火狐浏览器,Safafi浏览器、IE10+等现代浏览器都支持这种技术。假如你感兴趣,可以试试!

其他场景的应用

历史记录操作方法应用很广泛,我们在SPA页面中广发应用。当然,我们还有另外一个应用场景,场景如下:

点击列表内容,弹窗显示详情,详情中有一些介绍的链接,我们点击链接再次跳转到详情的详情!假如我们按历史返回,只能返回列表,弹窗就不会显示了,我们利用历史记录pushState,就可以实现弹窗跳转到详情的详情,然后再返回到弹窗。操作方法就是:

window.history.pushState({"html": datahtml, pageTitle: titlehtml, id: id}, "", lurl);

把我们的数据存到pushState中,然后在页面初始化的时候,绑定到页面中。可以用

if ('pushState' in history && history.state) {//进行初始化页面操作}

小问题

当我们每次点击,都会存一个pushState,当我们列表返回的时候,我们期望的效果是列表的上一次记录。那么我们用:

  window.history.replaceState({"html": datahtml, pageTitle: titlehtml, id: id}, "", lurl);

每次都对历史进行替换,而不是创建。就可以实现我们想要的效果!

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://blog.csdn.net/Jacksun_huang复制
如有侵权,请联系 yunjia_community@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 浅谈移动端页面无刷新跳转问题的解决方案

    王小婷
  • HTML5 简介(三):利用 History API 无刷新更改地址栏

    HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。

    山河木马
  • Browser 对象(一、history)

    history对象是window对象的一部分,也就是说可以window.history进行访问

    Rattenking
  • AJAX如何处理书签和翻页按扭(上)

    Making AJAX behave better in the browser 翻译:我要去桂林

    田春峰-JCJC错别字检测
  • window.location对象实现页面刷新

    大象无痕
  • 前端处理动态 url 和 pushStatus 的使用

    起因是这样的,在尝试前后端分离的这条道路上,我自己也在不断摸索,感觉要把大部分的坑都踩踩了。目前我用的技术是:

    零式的天空
  • pjax使用小结

    上周看到一篇文章在分析简书 我的主页 页面 3 个 tab 页切换的 bug,起先以为是寻常的样式 bug 而已没怎么在意,后来在文章中看到 pjax 这个术语...

    Lanson
  • HTML5学习-day02【悟空教程】

    请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论。正当你想要停下滚轮细看的时候,手残按到了F5。然后,页面刷新了,评论...

    Java帮帮
  • javascript基础修炼(6)——前端路由的基本原理

    现代前端开发中最流行的页面模型,莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,...

    大史不说话
  • 几种方法实现ajax请求内容时使用浏览器后退和前进功能

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • 如何将Pjax整合进网站,实现全站无刷新加载?

    杨逸轩
  • JSP 防止网页刷新重复提交数据

    if session("ok")=true then    response.write "错误,正在提交"    response.end end if

    阳光岛主
  • 详解 Ajax

      Ajax:标准读音 [ˈeɪˌdʒæks] ,中文音译:阿贾克斯。这个术语源自描述从基于 Web 的应用到基于数据的应用。Ajax 不是一种新的编程语言,而...

    Demo_Null
  • 原生 js 实现一个前端路由 router

    项目地址:https://github.com/biaochenxuying/route

    夜尽天明
  • 前端路由的原理及应用

    早期的路由都是后端来实现的,根据用户访问的地址的不同,浏览器从服务器请求对应的资源或页面展示给用户。当页面数据量大,结构复杂的时候,随之造成服务器的压力也比较大...

    江米小枣
  • 2019面试题:简单介绍下Ajax

    首先Ajax是Asynchronous JavaScript and XML的全称,Asynchronous是异步的意思,这跟传统的web不同。Ajax是Web...

    葆宁

扫码关注云+社区

领取腾讯云代金券