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

一、问题

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

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

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

这个会导致一些不便。

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

二、解决

我们来通过例子说明：

假设应用的主网页为 xxxurl ，页面的顶部有两个链接（相当于导航）

<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的区域会隐藏。

下面我们看看怎么实现：

我们来给链接增加锚点，代码如：

我们编写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单页面应用的浏览器后退前进功能

最新文章

热门文章