一、问题

随着AJax技术的普及,单页面web程序的应用越来越广泛。

所谓单页面应用程序,简单的说,就是应用只有一个主网页,第一次加载后,后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷新。

因为实际一直只有一个页面,虽然看上去页面经常发生变化(比如点了一个链接或按钮),但无法利用浏览器工具栏上的倒退、前进按钮进行操作。

这个会导致一些不便。

而html的a标签的 href属性可以设置 #锚点,来支持浏览器的倒退、前进。 下面我们就利用这属性来进行处理。

二、解决

我们来通过例子说明:

假设应用的主网页为 xxxurl , 页面的顶部有两个链接(相当于导航)

<a>主页</a>

<a>设置</a>

<div id="home">主页的内容</a>

<div id="set">设置的内容</a>

页面初始启动时,会显示主页对应的内容,id为home的div区域会显示,id为 set的区域会隐藏。

当点击“设置”链接时,希望id为home的div区域会隐藏,id为 set的区域会显示,同时也会触发ajax事件来从服务器获取数据更新id为 set的区域的内容。

同样当点击“主页”链接时,希望id为home的div区域会显示,id为 set的区域会隐藏。

下面我们看看怎么实现:

我们来给链接增加锚点,代码如:

<a href="#">主页</a>

<a href="#set">设置</a>

我们编写js代码,首先要在页面的启动事件中增加如下代码,这是关键:

window.onhashchange=hashChange;   //当网页的锚点发生变化时,会触发onhashchange事件,从而调用hashChange方法

编写hashChange方法,在该方法中利用js操作,进行页面的更新和数据的刷新。

function hashChange(){
if(!location.hash || location.hash=="#"){
//通过css的控制,让id为home的div区域会显示,id为 set的区域会隐藏    // 也可在这里利用ajax到服务器获取数据,更新页面
}
else if(location.hash=="#set"){
//通过css的控制,让id为set的div区域会显示,id为 home的区域会隐藏    // 也可在这里利用ajax到服务器获取数据,更新页面
}
}

另外因为页面启动时,不会触发onhashchange事件,也需要自己在页面启动事件中主动调用下hashChange方法。

后续当点击链接时,或者操作浏览器上的前进、后退按钮时,会触发onhashchange事件。

这样,我们通过这种方式就解决了文章开头提到的问题。

三、补充说明

需要补充下的时,html5增加了一个新的特性,引入了histtory.pushState()和history.replaceState()这两个方法,通过他们也可以实现类似的功能,这个有兴趣的可自行研究。

如果是简单的应用,利用标签a的锚点特性就可以达到相应的目的,并且简单易懂。复杂的应用,可以考虑利用html5的新特性。

利用 html的锚点(元素a)功能实现ajax单页面应用的浏览器后退前进功能的更多相关文章

  1. html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题

    一.背景 使用ajax,可以实现不需要刷新整个页面就可以进行局部页面的更新.这样可以开发交互性很强的富客户端程序,减少网络传输的内容.但长期以来存在一个问题,就是无法利用浏览器本身提供的前进和后退按钮 ...

  2. 几种方法实现ajax请求内容时使用浏览器后退和前进功能

    ajax是一个非常好玩的小东西,不过用起来也会存在一些问题. 我们可以利用ajax进行无刷新改变文档内容,但是没办法去修改URL,即无法实现浏览器的前进与后退.书签的收藏功能. 利用location的 ...

  3. AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  4. 利用原生JS实现类似浏览器查找高亮功能(转载)

    利用原生JS实现类似浏览器查找高亮功能 在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求 在.content中有许多.box,需要在.box中找出搜 ...

  5. 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能

    Ajax文件上载 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 导入组件并准备静态脚本 <dependency> <groupId& ...

  6. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  7. 利用spm提供的MoAEpilot听觉数据学习预处理以及单被试glm分析与统计推断

    1.数据介绍 下载:http://www.fil.ion.ucl.ac.uk/spm/data/auditory/ SUBJECT:1 VOLUME: 64*64*64 TR:7s total acq ...

  8. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  9. ASP.NET MVC 学习4、Controller中添加SearchIndex页面,实现简单的查询功能

    参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...

随机推荐

  1. Mathematica

    Mathematica是一款科学计算软件,很好地结合了数值和符号计算引擎.图形系统.编程语言.文本系统.和与其他应用程序的高级连接.很多功能在相应领域内处于世界领先地位,它也是使用最广泛的数学软件之一 ...

  2. 《刺杀金正恩》1080p全高清无水印,附中文字幕 bt种子下载,附字母(百度网盘/360云盘)

    <刺杀金正恩>1080p全高清无水印,附中文字幕下载(百度网盘/360云盘) 种子和字幕下载地址: thunder://QUFlZDJrOi8vfGZpbGV8JUU5JTg3JTg3JU ...

  3. 27_Blog Reader

    这个App是用来读取 Official Google Blog 的内容,然后显示出来. 用了新建工程时用了 Master-Detail Application 这个模板.用了Core Data用来存储 ...

  4. 读书笔记: nodejs API 参考

    >> bufferBuffer对象是全局对象Buffer支持的编码方式:ascii, utf8, base64, binarynew Buffer(size)new Buffer(arra ...

  5. 关于LD_DEBUG (转载)

    引用 LD_DEBUGThe dynamic library loader used in linux (part of glibc) has some neat tricks. One of the ...

  6. Scraping JavaScript webpages with webkit | WebScraping.com

    Scraping JavaScript webpages with webkit | WebScraping.com Scraping JavaScript webpages with webkit ...

  7. Android多线程断点续传下载

    这个月接到一个项目.要写一个像360助手一样的对于软件管理的APP:当中.遇到了一个问题:多线程断点下载 这个 ,因为之前没有写过这方面的应用功能.所以.不免要自学了. 然后就在各个昂站上收索并整理了 ...

  8. Objective-c 类的继承 方法重写 方法重载

    一.类的继承 Objective-c中类的继承与C++类似,不同的是Objective-c不支持多重继承,一个类只能有一个父类,单继承使Objective-c的继承关系很简单,易于管理程序. Obje ...

  9. Scala函数---既存类型

    语法: Type ::= InfixType ExistentialClauses ExistentialClauses ::= „forSome‟ „{‟ ExistentialDcl {semi ...

  10. Definitions

    Definitions and ODR Definitions are declarations that fully define the entity introduced by the decl ...