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

一、问题

随着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的新特性。

上一篇:web语义化与h5新增标签


下一篇:大数据时代的 9 大Key-Value存储数据库