- 1【转载】TCP状态转换图详解
- 2k8s中Pod基本使用_k8s进入pod命令
- 3两个人玩抛硬币的游戏，谁先抛到正面就获胜。那么先抛的人获胜概率为（）。两种思路_ab轮流抛硬币 先抛到正面的赢
- 4Linux 下搭建Git 服务器详细步骤_remote: total 26 (delta 7), reused 0 (delta 0) fro
- 5C++集群聊天服务器 数据模块+业务模块+CMake构建项目 笔记 （上）
- 6Excel ActiveSheet.Protect 的属性_activesheet.enableselection = xlnorestrictions
- 77款自媒体写作神器：让内容创作更高效！ #经验分享#人工智能#媒体
- 8linux安装分区方案推荐_装linux系统分区
- 9什么是边缘计算服务器？_边缘服务器
- 10[INS-32025] 所选安装与指定 Oracle 主目录中已安装的软件冲突_所选安装与指定oracle主目录中已安装的软件冲突
用html在图片上添加前进后退,利用 html的锚点（元素a）功能实现ajax单页面应用的浏览器后退前进功能...
赞
踩
一、问题
随着AJax技术的普及，单页面web程序的应用越来越广泛。
所谓单页面应用程序，简单的说，就是应用只有一个主网页，第一次加载后，后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷新。
因为实际一直只有一个页面，虽然看上去页面经常发生变化(比如点了一个链接或按钮)，但无法利用浏览器工具栏上的倒退、前进按钮进行操作。
这个会导致一些不便。
而html的a标签的 href属性可以设置 #锚点，来支持浏览器的倒退、前进。 下面我们就利用这属性来进行处理。
二、解决
我们来通过例子说明：
假设应用的主网页为 xxxurl ， 页面的顶部有两个链接(相当于导航)
主页
设置
页面初始启动时，会显示主页对应的内容，id为home的div区域会显示，id为 set的区域会隐藏。
当点击“设置”链接时，希望id为home的div区域会隐藏，id为 set的区域会显示，同时也会触发ajax事件来从服务器获取数据更新id为 set的区域的内容。
同样当点击“主页”链接时，希望id为home的div区域会显示，id为 set的区域会隐藏。
下面我们看看怎么实现：
我们来给链接增加锚点，代码如：
我们编写js代码，首先要在页面的启动事件中增加如下代码，这是关键：
window.οnhashchange=hashChange; //当网页的锚点发生变化时，会触发onhashchange事件，从而调用hashChange方法
编写hashChange方法，在该方法中利用js操作，进行页面的更新和数据的刷新。
functionhashChange(){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的新特性。
