H5 单页面解决“前进”,“后退”功能

前言:

基于 Ajax 的 Web 应用最为明显的特征在于使用了浏览器内部原生支持的 XMLHttpRequest 对象与后台服务器进行数据通信,由于这种通信方式不需要页面的刷新动作,因而无论与后台发生了多少次通信,浏览器的 URL 会一直保持在初始地址不变。这随之而来的一个问题便是不断变化的页面状态信息无法记录到浏览器的历史记录堆栈中,从而使得用户无法通过浏览器的前进 / 后退按钮在不同状态页面间进行切换。

一、解决思路

浏览器能够支持在用户访问过的页面间进行前进 / 后退的操作,依赖于内部维持的 history 对象。出于安全性的考虑,浏览器并不允许 JavaScript 脚本对该对象进行增删改之类写操作,而只是可以通过 history. back/forward() 等方法进行访问。既然在页面状态发生变化时,无法通过脚本直接去影响浏览器的历史信息,那么只有通过 URL 的变化来触发浏览器增加一条新的历史记录。这也就是说需要将 Ajax 应用的不同页面状态与 URL 进行一种一对一的映射,并且能够在回退或前进到某一 URL 之时,应用本身能够在页面无刷新的情况下跳转到正确的页面状态。

如何对 Ajax 应用的初始 URL 进行改变,而同时这种变化的切换又不会引起页面的重新加载呢?答案只有一个,那就是借助用于页面内资源片段定位目的的“片段标识符”(fragment identifierÿ

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值